vuejs使用數組元素的計算屬性

Question

我有基本模板，通過雙向數據綁定從wysiwyg編輯器輸出文本，如下所示：

<template>
  <div>
    <quill-editor 
      v-model="debounceText"
      :options="editorOptionProTemplate"
      >
    </quill-editor>
  <div  v-html="textComputed"></div>
  </div>
</template>

<script>
data () {
  return {
    text: ''
  }
},
computed: {
debounceText: {
  get() { return this.text; },
  set: _.debounce(function(newValue) {
    this.text = newValue;
  }, 100)
 },
//using computed for many variants for styling output in web (here just adding <b> tag)
  textComputed() {
    return '<b>' + this.text + '</b>'
  }
 }
</script>

在這個級別一切正常

現在，我將變量轉換為數組（對象），使用v-for（許多元素同時編輯並在數組中輸出它們如下）：

<template>
  <div v-for="item in items">
    <quill-editor 
      v-model="item.text"
      :options="editorOptionProTemplate"
      >
    </quill-editor>
  <div v-html="textComputedArray"></div>
  </div>
</template>

<script>
data () {
  return {
    items: [
      {active: true, text: 'text1', textOutput: ''},
      {active: true, text: 'text2', textOutput: ''},
      {active: true, text: 'text3', textOutput: ''},
      {active: true, text: 'text4', textOutput: ''},
      {active: true, text: 'text5', textOutput: ''}
   ]
  }
},

textComputedArray: {
        var output=''
          for (var i=0; i<this.items.length; i++) {
            if (this.items[i].active) {
              this.items[i].textOutput= this.items[i].text + '<br />'
              output = output + this.items[i].textOutput
            }
            else {
              this.items[i].textOutput= ''
            }          
          }
          return output
        },
</script>

我應該如何修改我的代碼以將debounceText計算應用於此輸出？ 我認為我根本無法將compute添加到我的模板中，而且我也無法將任何參數傳遞給computed屬性。

也許比我更有經驗的人會給我一些解決方案/建議嗎？

Answer 1

任何時候你有一個數組並且你認為每個項目都需要計算，你應該看看制作一個組件。 這就是數據和計算機相互連接的方式。

在很多情況下，你可以根據數組進行計算，這很好，但你應該知道，對數組的任何更改都會導致重新計算整個計算數組。 使用組件，僅重新計算受影響的行。 這里嵌入了一個簡單的例子。

 new Vue({ el: '#app', data: { arr: [1, 2, 3] }, computed: { carr() { console.log("Computing the whole array"); return this.arr.map(x => 'hi ' + x); } }, components: { addHi: { props: ['value'], template: '<div>{{a}}</div>', computed: { a() { console.log("Computing for", this.value); return 'hi ' + this.value; } } } }, created() { setTimeout(() => { console.log("** Changing a value"); this.arr.splice(2, 1, 'X'); }, 1500); } }); 

 <script src="//unpkg.com/vue@latest/dist/vue.js"></script> <div id="app"> <div v-for="a in carr">{{a}}</div> <add-hi v-for="a in arr" :value="a" :key="a"></add-hi> </div> 

如果你需要你的計算機是可寫的，你將無法編輯單個項目，所以你真的被迫制作一個組件。 它非常簡單：只需將HTML移動到組件的模板中，將計算機移動到組件中（調整它以處理prop value ），然后 - 因為它在prop上運行 - 更改set函數以便使用$emit而不是直接更改其值。

debouncedQuillEditor: {
  props: ['value', 'options'],
  template: '<quill-editor v-model="debouncedValue" :options="options"></quill-editor>',
  computed: {
    debouncedValue: {
      get() {
        return this.value;
      },
      set: _.debounce(function(newValue) {
        this.$emit('input', newValue);
      }, 100)
    }
  }
},

我做了一個小提琴演示。 我制作了第二個組件來處理輸出HTML，盡管它可能已包含在第一個組件中。