所以我在資料中有一個錯誤陣列，每當用戶關注輸入時，它都會檢查它是否為空。如果它是空的，它會將一個物件添加到錯誤陣列中，如下所示：
[
"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 或條形碼代表該專案/索引中的輸入。（如果你需要，組件在帖子的末尾）。所以現在我試圖在 product_name 或條形碼存在時顯示錯誤。
我正在嘗試這樣：
<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>
但它不顯示跨度
成分：
<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
}
},
編輯2：
跨度顯示我是否像這樣定義錯誤物件：
errors: {
0: {
barcode: '',
product_name: ''
},
1: {
barcode: '',
product_name: ''
}
},
但是，如果我使用 for 回圈跨度執行此操作，則不會顯示（我在方法中創建了一個 for 回圈，在該方法中我檢索所有檔案項并在 mount() 上觸發）：
for(var i = 0;i < response.data.documentItems[0].length;i ){
this.errors[i] = {
barcode: '',
product_name: '',
}
}
uj5u.com熱心網友回復：
您的問題源于他們檔案中提到的 vue 反應性警告。
https://vuejs.org/v2/guide/reactivity.html#For-Objects
Vue 將為在任何運行之前在資料函式中定義的每個欄位創建類似代理的物件（類似于 Observer 的模式），當您使用this.foo = bar（或類似的東西）手動添加欄位時，如果 'foo' 鍵是尚未在您的資料欄位中可用，vue 不會使其具有反應性，因此它不會在更改時更新您的 DOM。
您可以通過幾種變通方法實作您想要的。
在他們的檔案中也提到的第一種方法是使用 Object.assign 或傳播語法創建整個錯誤物件，并在資料中重新分配您的欄位。
// 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
}
},
這是因為 vue 無法理解手動添加/洗掉物件屬性。
第二種方法是使用錯誤陣列而不是物件。這可能是一個更好的主意，因為您的錯誤物件實際上是一個陣列。它具有固定的基于零的整數索引！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336795.html
標籤：javascript Vue.js 目的 Vuejs2