数组推送中的Vue - Array推送

Question

我试图为每个rows数组推送添加不同的genres。问题是，所有的rows都是为每个genre同时添加的，如果我输入文本，它将反映在所有rows中。如何分离每个rows的实体

这是我的密码。

模板

<table class="table">
  <v-btn @click="addGenre()">Add Genre</v-btn>

  <tbody>
    <tr v-for="genre in genres" :key="genre.id">
     <td>

       <v-select/>
       <v-btn @click="addRow()">Add Row</v-btn> // add row for each genre added

       <tr v-for="(row, index) in rows" :key="row.id">
         <td><v-textarea/></td>
       </tr>

     </td>
    </tr>  
  </tbody>
</table>

export default {
  data: ()=> ({
    genres: [],
    rows: [],
  }),

methods: {
  addGenre () {
    this.genres.push({
     genre: '',
    });
  },

  addRow () {
    this.rows.push({
      row: '',
    });
  },
}

Answer 1

如果我理解您的问题，我认为您应该将行存储在体裁对象中。

<tr v-for="(genre, genreIndex) in genres" :key="genre.id">
     <td>
       <v-select/>
       <v-btn @click="addRow(genreIndex)">Add Row</v-btn> // add row for each genre added
       <tr v-for="(row, index) in genre.rows" :key="row.id">
         <td><v-textarea v-model="row.row"/></td>
       </tr>
     </td>
</tr>  

  data: ()=> ({
    genres: [],
  }),

methods: {
  addGenre () {
    this.genres.push({
     genre: '',
     rows: [],
    });
  },

  addRow (genreIndex) {
    this.genres[genreIndex].rows.push({
      row: '',
    });
  },
}