1

我是 vueJs 的新手，一旦您单击它，我就会尝试将“活动”类切换为单个元素。这是我的代码，使用类 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
}
4

2 回答 2

1

一个简单的解决方案：

  1. 在@click="fav, 让 selectedItem=当前选择 (=listArtist)

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

而且您的代码中有一个问题，您最好为每个项目提供唯一的密钥。

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>

于 2018-04-13T21:41:44.877 回答
1

问题是您目前只有一个 color标志和多个艺术家元素。

为了让它发挥作用，你必须找到一种方法，改为拥有多个 colors 标志，每个艺术家一个。

你基本上可以通过两种形式做到这一点：

  • 您可以声明color为辅助对象并id用作键（下面的演示1）。
    • 通过创建color一个数组并使用index(of the v-for) 而不是id.
    • 这种方法的优点是不会向您当前的艺术家元素添加任何属性。
  • 您还可以在每个艺术家中声明一个color属性并使用它来代替（下面的演示 2）。
    • 这有点清洁，但确实需要添加color属性。

Demo 1（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;
}
<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>

演示 2（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;
}
<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,listArtist)" v-bind:class="{'active': listArtist.color}">favorite_border</i>
    </div>
  </div>
</div>

于 2018-04-13T21:35:16.303 回答