Vue - Array push within an array push

Question

I'm trying to achieve adding different rows for each genres array push. The problem is all the rows are simultaneously added for each genre and if I input the text, it will reflect in all rows. How do I separate the entity of each rows?

Here is my code.

Template

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

you have to used Dynamic V-model stackoverflow.com/questions/43364487/… — jual ahmed
– jual ahmed, Commented Feb 10, 2020 at 2:58

Andrew Young · Accepted Answer · 2020-02-10 02:53:02Z

2

If I understand your issue, I think you should just store rows inside of the genre objects.

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

answered Feb 10, 2020 at 2:53

Andrew Young

535 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Young Over a year ago

No problem my dude

Jim E Russel Over a year ago

May I please have a follow-up question? I'm having errors when adding a row when data are displayed Cannot read property 'push' of undefined" this.genres = response.data since index are not called, unlike when pressing the addGenre() function.

Collectives™ on Stack Overflow

Vue - Array push within an array push

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related