html元素的计算属性,javascript – 使用数组元素的计算属性的vuejs

我有基本模板,通过双向数据绑定从wysiwyg编辑器输出文本,如下所示：

v-model="debounceText"

:options="editorOptionProTemplate"

>

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 tag)

textComputed() {

return '' + this.text + ''

}

}

在这个级别一切正常

现在,我将变量转换为数组(对象),使用v-for(许多元素同时编辑并在数组中输出它们如下)：

v-model="item.text"

:options="editorOptionProTemplate"

>

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

if (this.items[i].active) {

this.items[i].textOutput= this.items[i].text + '
'

output = output + this.items[i].textOutput

}

else {

this.items[i].textOutput= ''

}

}

return output

},

我应该如何修改我的代码以将debounceText计算应用于此输出？我认为我根本无法将compute添加到我的模板中,而且我也无法将任何参数传递给computed属性.

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

解决方法:

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

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

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: '

{{a}}

',

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);

}

});

{{a}}

如果你需要你的计算机是可写的,你将无法编辑单个项目,所以你真的被迫制作一个组件.它非常简单：只需将HTML移动到组件的模板中,将计算机移动到组件中(调整它以处理prop值),然后 – 因为它在prop上运行 – 更改set函数以便使用$emit而不是直接更改其值.

debouncedQuillEditor: {

props: ['value', 'options'],

template: '',

computed: {

debouncedValue: {

get() {

return this.value;

},

set: _.debounce(function(newValue) {

this.$emit('input', newValue);

}, 100)

}

}

},

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

标签：javascript,vue-js

来源： https://codeday.me/bug/20190611/1216269.html