Vue js 视图不会使用动态添加的 V 模型进行更新

Question

我在 vuejs 挂载的钩子中向模型添加了一些动态数据，但是当它第一次挂载时，它会反应性工作并查看更新，但是当我进行更改时，此模型视图不会更新。

{
props: {
requestall: Object,
category_field_options: Array,
},
data(){
return {
field_options: {},
};
},
mounted(){
for(var field of this.category_field_options)
{
var data = [];
for(var option of field.options)
{
if(this.check_option_is_selected(field.id, option.id) ) // true
{
data.push(option.id);
}
}

this.field_options['field_' + field.id] = data;
}
},
methods: {
/**
* Dynamic category fields options checked or unchecked.
* 
* @param object event
* @param int field_id
* @param int option_id
*/
field_option_changed(event, field_id, option_id)
{
if(this.field_options['field_' + field_id].indexOf(option_id) > -1){
var index = this.field_options['field_' + field_id].indexOf(option_id);
this.field_options['field_' + field_id].splice(index, 1);
}else{
this.field_options['field_' + field_id].push(option_id);
}
},
/**
* @param int
* @param int
* 
* @return 
*/
check_option_is_selected(field_id, option_id)
{
var check = this.requestall['field_' + field_id] 
&& (this.requestall['field_' + field_id].indexOf(option_id.toString()) > -1) 
? true : false;
return check;
},
}
}

我看到更改在 vue chrome 检查器上生效field_option_changed当函数工作时。 但查看结束在这些更改后不会更新。安装后，它工作正常。 我不确定这是否是因为javascript存储的变量数据类型而发生的 (在 JavaScript 中，变量可以存储两种类型的数据：原语和引用(

<template>
<div>
<span v-for="(val,key,index) in field_options" :key="'willSubmitField_' + index">
<input type="text" v-for="option in val" :key="'willSubmitField_' + index + '_' + option" 
:name="key + '[]'" :value="option">
</span>
</div>
</template>

#EDIT 1

我找到了一个具有一个 v-model 数组值并仅保留所选值的解决方案。

{
props: {
requestall: Object,
category_field_options: Array,
},
data(){
return {
field_options: [],
};
},
mounted(){
for(var key in this.requestall)
{
if(key.search(/^field_d$/i) > -1)
{
for(var option of this.requestall[key]){
this.field_options.push(parseInt(option));
}
}
}
},
methods: {
/**
* Dynamic category fields options checked or unchecked.
* 
* @param object event
* @param int option_id
*/
field_option_changed(event, option_id)
{
if(this.field_options.indexOf(option_id) > -1){
var index = this.field_options.indexOf(option_id);
this.field_options.splice(index, 1);
}else{
this.field_options.push(option_id);
}
},
/**
* @param int
* @param int
* 
* @return 
*/
check_option_is_selected(field_id, option_id)
{
var check = this.field_options && (this.field_options.indexOf(option_id) > -1) 
? true : false;
return check;
},
}
}

和模板中的更改

<template>
<div>
<span v-for="(field,index) in category_field_options" :key="'categoryField_' + index">
<span v-for="option in field.options" :key="'categoryField_option' + option.id">
<input type="text" :name="'field_' + field.id + '[]'" 
v-if="check_option_is_selected(field.id, option.id)" 
:value="option.id">
</span>
</span>
</div>
</template>

Answer 1

由于现代 JavaScript 的限制，Vue 无法检测到属性的添加或删除。例如：

var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` is now reactive
vm.b = 2
// `vm.b` is NOT reactive

Vue 不允许将新的根级反应式属性动态添加到已经创建的实例中。但是，可以使用Vue.set(object, propertyName, value)方法向嵌套对象添加反应式属性。

有关对象更改检测警告的更多信息，请参阅此处。