javascript - 尝试使用单个按钮功能将播放列表从数组添加到另一个组件

Question

假设您有一个来自数据库的对象数组(例如歌曲)，并且它是使用 v-for 渲染的。我想创建一个按钮，其功能是将每个对象歌曲添加到另一个组件。请记住，我不知道对象键，因为我不知道该数组中有多少个对象。还要记住，该按钮是使用相同的 v-for 添加到每个列表的

<template>
  <div>
    <h1>Vue Top 20 Artists</h1>
      <ul>
      <li class="list" v-for="(artist, x) in artists" :key="x">
        <h3>{{artist.name}}</h3>
        <button @click="addPlayList()">Add to playlist</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: ["artists"],
  methods:{
    addPlayList(){
    let hey = this.artists
    alert(Object.keys(hey))
    }
  }
} 
</script>

Answer 1

使用艺术家作为你的方法的参数是多么棒:

<template>
  <div>
    <h1>Vue Top 20 Artists</h1>
      <ul>
      <li class="list" v-for="(artist, x) in artists" :key="x">
        <h3>{{artist.name}}</h3>
        <button @click="addPlayList(artist)">Add to playlist</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: ["artists"],
  methods:{
    addPlayList(artist){
      alert(artist)
    }
  }
} 
</script>

如果您想将单击的按钮传输到父元素，请使用 this.$emit() 详细解释:https://v2.vuejs.org/v2/guide/components-custom-events.html