我有一个基本的模板,通过以下两种数据绑定方式从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>

在这个级别上,一切正常

现在,我将变量更改为数组(object),使用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 computed应用于此输出?我认为我不能将computed添加到模板中,也不能将任何参数传递到computed属性中.

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

推荐答案

任何时候,当你有一个数组,并且你认 for each 项目都需要一个计算的数组时,你应该考虑制作一个组件.这就是数据和计算机相互连接的方式.

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

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>

If you need your computed to be writable, you won't be able to edit individual items, so you're really forced to make a component. It is pretty straightforward: just move the HTML into the template of the component, move the computed into the component (adjusting it to work on the prop value), and then – because it is operating on a prop – change the set function to use $emit rather than changing its value directly.

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,尽管它可能包含在第一个组件中.

Vue.js相关问答推荐

在Nuxt项目中混合Scrolltrigger与Lenis

Vutify-v-工具提示-不使用键盘轻击按钮显示

将 v-calendar 与以时间和日期格式出现的事件一起使用

TailwindCSS 为什么前者比后者重要?

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

Vue index.html favicon 问题

使用 Vue Js 运行 Jest 测试时出现语法错误:无法在模块外使用 import 语句

如何在 vue.js 构建中重命名 index.html?

Vue.js 过滤数组

事件 click点击的无效处理程序:未定义

错误:vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

Modal 内部的 Vue.js AJAX 调用

VueJS 通过渲染传递数据

使用 Vue-cli,我在哪里声明我的全局变量?

使用props向组件添加类名

如何从 keep-alive 中销毁缓存的 Vue 组件?

vuejs 配置:使用全局变量?

使用 vuejs 动态设置 id 标签

Vue.js 3 - 替换/更新react性对象而不会失go react性

Vue $refs 对象的类型为 unknown未知