在 focusout vuejs 上验证输入

Question

所以我有一个 table 并且在 table 里面我有一个带有 v-for 循环的 tr

看起来像这样：

<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center">
  <td>{{index + 1}}.</td>
  <td class="">
    <div class="flex items-center itemContainer">
      <textarea @focusout="checkInput('barcode',index)"
                v-model="item.barcode"
                id="" cols="15" rows="2" class="text-center item-box trigger">
      </textarea>
      <span class="tooltip">
        test123
      </span>
    </div>
  </td>
  <td class="px-3">
    <div class="flex items-center py-0.5 itemContainer">
      <textarea @focusout="checkInput('product_name',index)"
                v-model="item.product_name"
               id="" cols="26" rows="2" class="text-sm text-center item-box trigger">
      </textarea>
      <span class="tooltip" style="left: 5px;">
        test123
      </span>
    </div>
  </td>
</tr>

现在我正在尝试使用此函数验证焦点输出的输入：（我在上面代码的前两个文本区域上调用了此函数）

checkInput(name, itemIndex){
  if(this.documentItems[itemIndex].name == ""){
    this.errors[itemIndex].name.push("To polje je obvezno.");
  };
  console.log(this.errors);
},

这里的问题是，当我调用 this.documentItems[itemIndex].name 时，它会查看 documentItems 名称而不是函数参数名称。所以它输出这个错误

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'name')"

我该如何解决这个问题？

Answer 1

首先像这样删除 v-model 中的所有 [index]：

<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center">
  <td>{{index + 1}}.</td>
  <td class="">
    <div class="flex items-center itemContainer">
      <textarea @focusout="checkInput(barcode, index)" v-model="documentItems.barcode" id="" cols="15" rows="2" class="text-center item-box trigger"></textarea>
      <span class="tooltip">
        test123
      </span>
    </div>
  </td>
  <td class="px-3">
    <div class="flex items-center py-0.5 itemContainer">
      <textarea @focusout="checkInput(product_name, index)" v-model="documentItems.product_name" id="" cols="26" rows="2" class="text-sm text-center item-box trigger"></textarea>
      <span class="tooltip" style="left: 5px;">
        test123
      </span>
    </div>
  </td>
</tr>

然后像这样更新您的脚本：

checkInput(name, itemIndex){
  console.log(itemIndex); //You don't need this parameter
  if(this.documentItems.name == ""){
    this.errors.name.push("To polje je obvezno.");
  };
  console.log(this.errors);
},

现在无法测试它，但它应该像这样工作。如果这对你有用，请给我简短的反馈。

Answer 2

尝试如下 this.documentItems[itemIndex][name] :

new Vue({
  el: '#demo',
  data() {
    return {
      documentItems: [{id: 1, barcode: 99, product_name: 'aaa'}],
      errors: []
    }
  },
  methods: {
    checkInput(name, itemIndex){
    console.log(this.documentItems[itemIndex])
      if(this.documentItems[itemIndex][name] == ""){
        this.errors.push(name, "To polje je obvezno.");
      };
      console.log(this.errors);
    },
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table>
<tr v-for="(item, index) in documentItems" :key="item.id" class="border-b border-l border-r border-black text-center">
  <td>{{index + 1}}.</td>
  <td class="">
    <div class="flex items-center itemContainer">
      <textarea @focusout="checkInput('barcode', index)"
                v-model="item.barcode"
                id="" cols="15" rows="2" class="text-center item-box trigger">
      </textarea>
      <span class="tooltip">
        test123
      </span>
    </div>
  </td>
  <td class="px-3">
    <div class="flex items-center py-0.5 itemContainer">
      <textarea @focusout="checkInput('product_name', index)"
                v-model="item.product_name"
               id="" cols="26" rows="2" class="text-sm text-center item-box trigger">
      </textarea>
      <span class="tooltip" style="left: 5px;">
        test123
      </span>
    </div>
  </td>
</tr>
</table>
</div>

在 focusout vuejs 上验证输入

validate inputs on focusout vuejs

javascript

vue.js

vuejs2