javascript vuejs 对数组元素使用计算属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49025064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
vuejs using computed property for array elements
提问by gileneusz
I've got basic template that is outputing text from wysiwyg editor via two-ways data binding as below:
我有一个基本模板，它通过以下两种数据绑定从所见即所得编辑器输出文本：
<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>
at this level all works fine
在这个级别一切正常
Now, I'm changing variable into array (object), using v-for (many elemnents to edit at the same time and outputing them in the array as below):
现在，我将变量更改为数组（对象），使用 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>
how should I modify my code to apply debounceText computed to this output? I think that I simply cannot add computed to my template, and also I cannot pass any parameter into computed property.
我应该如何修改我的代码以将计算出的 debounceText 应用到这个输出？我认为我根本无法将计算添加到我的模板中，而且我也无法将任何参数传递到计算属性中。
Maybe someone more experienced than me will give me some solution/advice?
也许比我更有经验的人会给我一些解决方案/建议？
回答by Roy J
Any time you have an array and you think each item needs a computed, you should look at making a component. That is how data and computeds get attached to each other.
任何时候你有一个数组并且你认为每个项目都需要一个计算，你应该考虑制作一个组件。这就是数据和计算结果相互关联的方式。
In a lot of cases, you can make a computed based on the array, and it's fine, but you should be aware that any change to the array causes a recompute of the entire computed array. With a component, only the affected rows are recomputed. A simple example is embedded here.
在很多情况下，您可以根据数组进行计算，这很好，但是您应该意识到对数组的任何更改都会导致重新计算整个计算数组。对于组件，仅重新计算受影响的行。这里嵌入了一个简单的例子。
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 setfunction to use $emitrather than changing its value directly.
如果你需要你的计算是可写的，你将无法编辑单个项目，所以你真的被迫制作一个组件。它非常简单：只需将 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)
}
}
},
I made a fiddleto demonstrate. I made a second component to handle the output HTML, although it could have been included in the first component.
我做了一个小提琴来演示。我制作了第二个组件来处理输出 HTML，尽管它可以包含在第一个组件中。
