Push elements to new array onClick VueJS?

Question

I have an array which i am looping over and outputting the text. I am trying to create an onClick method through which whatever text i click on, it gets pushed to a new array in whatever order they are clicked.

Here is my sample codepen

Here is my code setup:-

<div id="app">
   <v-app>
     <div v-for= "(item,index) in items" :key="item">
       <span class="title" @click="onSelect">{{item.text}}</span>
    </div>
  </v-app>
</div>

and this is the script:-

new Vue({
  el: '#app',
   data() {
      return {
         items: [
             { text: 'foo', value: 'bar' },
             { text: 'bar', value: 'biz' },
             { text: 'buzz', value: 'buzz'}
         ]
      }
    },
 methods: {
   onSelect() {
     let arr = []   
     console.log(arr)   
    }
  }
})

Any help will be appreciated. Thank you.

Steve Holgado · Accepted Answer · 2020-02-07 19:32:29Z

3

You can pass a function as your click handler and pass along the item:

<div id="app">
  <v-app>
    <div v-for="(item, index) in items" :key="item">
      <span class="title" @click="() => onSelect(item)">{{item.text}}</span>
    </div>
  </v-app>
</div>

You can then push that item onto an array:

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { text: 'foo', value: 'bar' },
        { text: 'bar', value: 'biz' },
        { text: 'buzz', value: 'buzz'}
      ],
      clickedItems: []
    }
  },
  methods: {
    onSelect(item) {
      this.clickedItems.push(item)
      console.log(this.clickedItems)
    }
  }
})

Hope this helps.

answered Feb 7, 2020 at 19:32

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Push elements to new array onClick VueJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related