vuejs中无效的计算循环

【问题标题】：ineffective computed loop in vuejsvuejs中无效的计算循环
【发布时间】：2018-08-05 22:23:08
【问题描述】：

我有如下数组：

return {
   items: [
      { active: false, text: 'text1', textOutput: ''},
      { active: false, text: 'text1', textOutput: ''},
      { active: false, text: 'text1', textOutput: ''},
      ...
   ],
}

现在，这个数组的目的是使用如下计算属性将数据输出到 DOM。

我只想输出 active: true 的数据，它正在改变 web 其他部分的 onclick，所以计算出的 resultDOM 正在观察这个变化并且只改变items.active="true"。我还使用文本字段来更改 items.text[i] 值。

computed: {
 resultDOM () {
        for (var i=0; i<this.items.length; i++) {
          if (this.items[i].active) {
            this.items[i].textOutput = '<li>' + this.items[i].text + '</li>'
            console.log('bam')
          }
          else {
            this.items[i].textOutput = ''
            console.log('bam else')
          }          
        }
        var output=''
        for (var i=0; i<this.items.length; i++) {
          output = output + this.items[i].textOutput
        }
        return output
 }
}

问题是这需要一些时间来执行，每次我只将一个 active 更改为 true（或 items.text 值）计算时都会检查表的每个元素，所以它非常无效。 我可以请教您的提示，我应该如何改进我的代码以提高效率？ 正确的做法是什么？

编辑：

<div  v-html="resultDOM"></div>

【问题讨论】：

• 能否提供该组件的模板？我想你可以使用条件渲染。
• @oniondomes 我添加到问题中。我可以使用它，但我还需要 textOutput 值以供将来使用（将其保存到数据库/其他组件）
• 我看到你评论太晚了。我会修改我的答案。
• @oniondomes 没关系，你的回答似乎是正确的，坚持计算的主要思想是我将来会使用它来动态更改页面元素，如计算中的
• 对象并获取以这种方式在许多变体中可重用的成品 HTML