时间戳

首页 > 解决方案 > 尝试使用单个按钮功能将播放列表从数组添加到另一个组件

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

问题描述

假设您有一个来自数据库（比如歌曲）的对象数组，并且它是使用 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>

标签： javascriptvue.js

解决方案

使用艺术家作为你的方法的论据是什么：

<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 ://vuejs.org/v2/guide/components-custom-events.html

推荐阅读