v-if span在错误填充时不显示

Question

所以我在data中有一个错误数组，每当用户关注输入时，它都会检查它是否为空。如果它是空的，它会添加一个对象到错误数组中，如下所示:

[
"0": {
"product_name": {
"message": "to polje je obvezno"
},
"barcode": {
"message": "to polje je obvezno"
}
},
"1": {
"barcode": {
"message": "to polje je obvezno"
}
},
"2": {
"product_name": {
"message": "to polje je obvezno"
}
}
]

所以0,1,2代表项目的索引，因为我有一个v-for循环，然后product_name或barcode代表该项目/索引中的输入。(组件是在文章的末尾，如果你需要它)。所以现在我试图在product_name或barcode存在时显示错误。

我正在尝试这样做:

<span class="tooltip" 
v-if="errors && errors[index] && errors[index]['product_name']" style="left: 5px">
test123 (this is product_name error, above index is the current index in v-for so 0 or 1 or 2...)
</span>
<span class="tooltip" 
v-if="errors && errors[index] && errors[index]['product_name']"style="left: 5px">
test123 (this is barcode error, above index is the current index in v-for so 0 or 1 or 2...)
</span>

但是它不显示span

组件:

<tr v-for="(item, index) in documentItems" :key="item.id">
<td>{{index + 1}}.</td>
<td>
<div>
<textarea v-model="item.barcode"
@focusout="checkInput('barcode',index)"
cols="15" rows="2"> 
</textarea>
<span v-if="errors && errors[index] && errors[index]['barcode']">
test123
</span>
</div>
</td>
<td>
<div>
<textarea v-model="item.product_name"
@focusout="checkInput('product_name',index)"
cols="15" rows="2"> 
</textarea>
<span v-if="errors && errors[index] && errors[index]['product_name']">
test123
</span>
</div>
</td>
</tr>

编辑:有可能是我的checkInput有问题吗?下面是我创建错误的方法:

checkInput(name, itemIndex){
if(this.documentItems[itemIndex][name] == null){
this.errors[itemIndex][name] = { message: 'to polje je obvezno'}
};
//testing
console.log(this.errors[itemIndex][name]); //works
if(this.errors[1]['product_name']){
console.log("yes"); //works
}
},

EDIT2:

span显示如果我像这样定义错误对象:

errors: {
0: {
barcode: '',
product_name: ''
},
1: {
barcode: '',
product_name: ''
}
},

但是如果我用for循环span不显示(我在方法中做了一个for循环我检索所有的文档项并在mounted()上触发):

for(var i = 0;i < response.data.documentItems[0].length;i++){
this.errors[i] = {
barcode: '',
product_name: '',
}
}

Answer 1

您的问题根源于他们的文档中提到的值反应性警告。

https://v2.vuejs.org/v2/guide/reactivity.html的对象

Vue将创建代理类对象(一种类似于使用Object.defineProperty的Observer模式)，在任何运行之前，当您使用this.foo = bar(或类似的东西)手动添加字段时，在数据字段中定义的每个字段，如果'foo'键不在您的数据字段中可用，Vue将不会使其响应，因此它不会更新您的DOM。

你可以通过几个变通方法实现你想要的。

在他们的文档中也提到的第一种方法是用object创建整个errors对象。分配或扩展语法并重新分配data中的字段。

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

这个解决方案类似于将一个字段视为其不可变的

所以你可以修改你的checkInput方法:

checkInput(name, itemIndex){
if(this.documentItems[itemIndex][name] == null){
const newErrorForName = { [name]: { message: 'to polje je obvenzo' }};
this.errors = Object.assign({}, {...this.errors, [itemIndex]: newErrorForName })
};
//testing
console.log(this.errors[itemIndex][name]); //works
if(this.errors[1]['product_name']){
console.log("yes"); //works
}
},

这是因为我们无法理解手动对象属性的添加/删除。

第二种方法是使用数组而不是对象来处理错误。这可能是一个更好的主意，因为你的errors对象实际上是一个数组。它有固定的整数零基索引!