如何将类切换到v-for中的单个元素

Question

我是vueJs的新手，一旦你点击它，我就试图将一个类“active”切换为单个元素。这是我的代码女巫用类material_icons切换所有元素。怎么做只切换单击的元素？ 谢谢。 我的hmtl：

 <div v-for="(listArtist, index) in listArtists" class="col s4 center" id="art">
<p> {{ listArtist.title_short }}</p>
<p>{{ listArtist.artist.name }} </p>
<p>{{ listArtist.album.title }}</p>
<div id="margin-test">   
    <i class="material-icons" @click="fav(listArtist.title,listArtist.album.title,listArtist.artist.name,listArtist.id)"  v-bind:class="{'active': color}">favorite_border</i>
</div>

我的js：

data: {
listArtists:[],
color: false,
}

fav: function(titleTrack, album, artist, id ){
            this.color = !this.color
}

Answer 1

问题是你目前只有只有一个 Tim: My Name is Tim --------------------------------- What do you want to say? > _ 标志和多个艺术家元素。

为了使其有效，您必须找到一种方法，而不是多个 color标志，每个艺术家一个。

您可以基本上以两种形式完成：

• 您可以将color声明为辅助对象，并使用color作为密钥（下面的演示1）。
  • 通过使id数组并使用color（index）代替v-for，可以实现同样的效果。
  • 此方法的优点是不向当前艺术家元素添加任何属性。
• 您还可以在每位艺术家中声明id属性，然后使用它（下面的演示2）。
  • 这有点干净，但确实需要添加color属性。

演示1（使用color作为分离的对象或数组）

color

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    listArtists: [
    	{id: 1, title: 'title1', title_short: 'title_short1', artist: {name: 'artist.name1'}, album: {title: 'album.title1'}},
      {id: 2, title: 'title2', title_short: 'title_short2', artist: {name: 'artist.name2'}, album: {title: 'album.title2'}}
    ],
    color: {},
  },
  methods: {
    fav: function(titleTrack, album, artist, id) {
      this.$set(this.color, id, !this.color[id]);
    }
  }
})

.active {
  color: red;
}

演示2（在每个元素上使用<script src="https://unpkg.com/vue"></script> <div id="app"> <div v-for="(listArtist, index) in listArtists" class="col s4 center" id="art"> <p> {{ listArtist.title_short }}</p> <p>{{ listArtist.artist.name }} </p> <p>{{ listArtist.album.title }}</p> <div id="margin-test"> <i class="material-icons" @click="fav(listArtist.title,listArtist.album.title,listArtist.artist.name,listArtist.id)" v-bind:class="{'active': color[listArtist.id]}">favorite_border</i> </div> </div> </div>属性）

color

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    listArtists: [
    	{id: 1, title: 'title1', title_short: 'title_short1', artist: {name: 'artist.name1'}, album: {title: 'album.title1'}},
      {id: 2, title: 'title2', title_short: 'title_short2', artist: {name: 'artist.name2'}, album: {title: 'album.title2'}}
    ],
    color: {},
  },
  methods: {
    fav: function(titleTrack, album, artist, id, listArtist) {
      this.$set(listArtist, 'color', !listArtist.color);
    }
  }
})

.active {
  color: red;
}

Answer 2

一个简单的解决方案：

在@click="fav中

1. ，让selectedItem =当前选择（= listArtist）

2. 然后使用v-bind:class="{'active': selectedItem == listArtist}"

您的代码中存在一个问题，您最好提供the unique key for each item。

new Vue({
    el: "#app",
    data: {
        listArtists: 
        [
          {id:1,'title_short':'Test-A',artist:{name:'Name-A'}, album:{title:'Title-A'}},
          {id:2,'title_short':'Test-B',artist:{name:'Name-B'}, album:{title:'Title-B'}},
          {id:3,'title_short':'Test-C',artist:{name:'Name-C'}, album:{title:'Title-C'}}        
        ],
        selectedItem: null
    },
    methods: {
      fav: function(listArtist, titleTrack, album, artist, id ){
        this.selectedItem = listArtist
      }
    }
});

.active{
  background-color:red
}

<script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>
<div id="app">
  <div v-for="(listArtist, index) in listArtists" class="col s4 center" :key="index">
  <p> {{ listArtist.title_short }}</p>
  <p>{{ listArtist.artist.name }} </p>
  <p>{{ listArtist.album.title }}</p>
  <div id="margin-test">   
      <i class="material-icons" @click="fav(listArtist, listArtist.title,listArtist.album.title,listArtist.artist.name,listArtist.id)"  v-bind:class="{'active': selectedItem == listArtist}">favorite_border</i>
  </div>
</div>