vue.js - Vue - 数组推送中的数组推送

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: '',
    });
  },
}