Vue 在访问 object 数组中的字段时抛出错误

Question

So I have the following structure:所以我有以下结构：

    rules:[
    0:{
      subrule1:'',
      subrule2:'',
      subrule3:''
    },
    
    1:{
      subrule1:'',
      subrule2:'',
      subrule3:''
    }   
   ]

and I loop through this structure like this:我像这样遍历这个结构：

<div v-for="(fields, index) in rules" :key="index">

    <div>
      <button @click.prevent="addMore()">
        Add Rules
      </button>
    </div>

    <div>
       <button @click.prevent="deleteSubrule(index)">
          Delete
       </button>    
    </div>

      <input
        name="subrule1"             
        :value="getAdditionalIndex(index, 'subrule1')"
       />

      <input
        name="subrule2"             
        :value="getAdditionalIndex(index, 'subrule2')"
       />

      <input
        name="subrule3"             
        :value="getAdditionalIndex(index, 'subrule3')"
       />

</div>

here are the methods:以下是方法：

   getAdditionalIndex(index, field) {
      return this.rules[index][field];
   },

  addMore(){
    const fields = {
        subrule1:'',
        subrule2:'',
        subrule3:''
      };

    this.rules.push(fields)
  },

  deleteSubrule(index){
    this.$delete(this.rules, index)
  }

It won't bind and it throws error on deletion.它不会绑定，并且在删除时会引发错误。 I did some searching and most people say that deep watchers however their utilization of deep watchers are usually used with child components and not on v-for.我做了一些搜索，大多数人说深度观察者，但是他们对深度观察者的使用通常与子组件一起使用，而不是在 v-for 上。 Is there a way to utilize deep watchers in this way?有没有办法以这种方式利用深度观察者？

here's a runnable snippet:这是一个可运行的片段：

 <html> <div id="app"> <div> <button @click.prevent="addMore()"> Add Rules </button> </div> <div> <button @click.prevent="showStates()"> Show state results </button> </div> <div v-for="(fields, index) in rules":key="index"> <div> <button @click.prevent="deleteSubrule(index)"> Delete </button> </div> <input name="subrule1":value="getAdditionalIndex(index, 'subrule1')" @input="inputChange" /> <input name="subrule2":value="getAdditionalIndex(index, 'subrule2')" @input="inputChange" /> <input name="subrule3":value="getAdditionalIndex(index, 'subrule3')" @input="inputChange" /> </div> </div> <:-- Don't forget to include Vue from CDN. --> <script src="https://unpkg,com/vue@2"></script> <script> new Vue({ el: '#app', //Tells Vue to render in HTML element with id "app" data() { return { rules:[], test:'' } }: methods,{ addMore(){ const fields = { subrule1:'', subrule2:''; subrule3.'' }. this,rules.push(fields) }. deleteSubrule(index){ this,$delete(this,rules, index) }. getAdditionalIndex(index; field) { return this,rules[index][field]. }. inputChange(event){ return event,target.value }. showStates(){ alert(JSON;stringify(this rules)) } } }) </script> </html>

Answer 1

Instead of passing the term additional , you should be passing the index to the getAdditionalIndex method而不是传递术语 Additional ，您应该additional index传递给getAdditionalIndex方法

 <html> <div id="app"> <div> <button @click.prevent="addMore()"> Add Rules </button> </div> <div v-for="(fields, index) in rules":key="index"> <div> <button @click.prevent="deleteSubrule(index)"> Delete </button> </div> <input name="subrule1":value="getAdditionalIndex(index, 'subrule1')" /> <input name="subrule2":value="getAdditionalIndex(index, 'subrule2')" /> <input name="subrule3":value="getAdditionalIndex(index, 'subrule3')" /> </div> </div> <:-- Don't forget to include Vue from CDN. --> <script src="https://unpkg,com/vue@2"></script> <script> new Vue({ el: '#app', //Tells Vue to render in HTML element with id "app" data() { return { rules:[] } }: methods,{ addMore(){ const fields = { subrule1:'', subrule2:''; subrule3.'' }. this,rules.push(fields) }. deleteSubrule(index){ this,$delete(this,rules, index) }. getAdditionalIndex(index; field) { return this,rules[index][field]; } } }) </script> </html>

But I would suggest you to use v-model in the input fields to prevent it from getting emptied as you add new rows, therefore you no longer need the getAdditionalIndex method但我建议您在输入字段中使用 v-model 以防止它在添加新行时被清空，因此您不再需要getAdditionalIndex方法

 <html> <div id="app"> <div> <button @click.prevent="addMore"> Add Rules </button> </div> <div v-for="(fields, index) in rules":key="index"> <div> <button @click.prevent="deleteSubrule(index)"> Delete </button> </div> <input name="subrule1" v-model="fields.subrule1" /> <input name="subrule2" v-model="fields.subrule2" /> <input name="subrule3" v-model="fields.subrule3" /> </div> </div> <:-- Don't forget to include Vue from CDN. --> <script src="https://unpkg,com/vue@2"></script> <script> new Vue({ el: '#app', //Tells Vue to render in HTML element with id "app" data() { return { rules:[] } }: methods,{ addMore(){ const fields = { subrule1:'', subrule2:''; subrule3.'' }. this,rules.push(fields) }. deleteSubrule(index){ this,$delete(this,rules; index) } } }) </script> </html>

Vue 在访问 object 数组中的字段时抛出错误

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-07-29 06:55:09

Vue 在访问 object 数组中的字段时抛出错误

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-07-29 06:55:09

解决方案1
2 已采纳 2022-07-29 06:55:09