vuejs使用数组元素的计算属性

问题描述 投票:5回答:1

我有基本模板,通过双向数据绑定从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属性。

也许比我更有经验的人会给我一些解决方案/建议吗?

javascript vue.js
1个回答
8
投票

任何时候你有一个数组并且你认为每个项目都需要计算,你应该看看制作一个组件。这就是数据和计算机相互连接的方式。

在很多情况下,你可以根据数组进行计算,这很好,但你应该知道,对数组的任何更改都会导致重新计算整个计算数组。使用组件,仅重新计算受影响的行。这里嵌入了一个简单的例子。

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)
    }
  }
},

我让a fiddle进行演示。我制作了第二个组件来处理输出HTML,尽管它可能已包含在第一个组件中。

© www.soinside.com 2019 - 2024. All rights reserved.