将元素推送到新数组onClick VueJS？

Somethingwhatever 发表于 Dev

无论如何

我有一个数组，我正在遍历并输出文本。我正在尝试创建一个onClick方法，通过该方法，无论我单击什么文本，它都会以单击它们的任何顺序被推送到新数组。

这是我的示例代码笔

这是我的代码设置：

<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>

这是脚本：

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)   
    }
  }
})

任何帮助将不胜感激。谢谢。

史蒂夫·霍尔加多

您可以将函数作为点击处理程序并传递以下项目：

<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>

然后，您可以将该项目推入数组：

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)
    }
  }
})

希望这可以帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。