Vue.js在v中添加多个活动类

Question

我在v-for cicle中有一些li元素。我需要同时选择多个，如果已经选择，则删除active类。

如果我按顺序选择项目，我的脚本将起作用:从第一到最后(选择项目)，从最后到第一(取消选择项目)。请帮帮我。

​

var example1 = new Vue({
  el: '#example-1',
  data: {
    tags: ['tag-1', 'tag-2', 'tag-3', 'tag-4'],
    activeTag: [],
  },
  methods: {
    onTagClick: function(i) {
      if ( this.activeTag.includes(i) ) {
        console.log('Delete');
        const index = this.activeTag.indexOf(i);
        if ( index > -1 ) {
            this.activeTag.splice(index, 1);
        }
      } else {          
        console.log('Add');          
        this.activeTag.push(i);
      }
      console.log(`activeTag[i]: ${this.activeTag}`);
    }
  }
})

li {
  display: inline-block;
  padding: 8px 10px;
  margin-right: 0.5rem;
}

a {
color: #000;
  text-decoration: none;
}

li.active>a{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="example-1">
  <ul v-if="tags">
    <li v-for="(tag, i) in tags" :key="i" :class="{active: activeTag[i] === i}">
        <a @click="onTagClick(i)"  href="javascript:void(0)">{{ tag }}</a>
    </li>
</ul>
</div>

​

Answer 1

你对这个解决方案有什么看法？这是达到同样效果的最短途径。

​

var example1 = new Vue({
  el: '#example-1',
  data: {
    tags: [{tag:'tag-1', active: false},{tag:'tag-2', active: false}, {tag:'tag-3', active: false}, {tag:'tag-4', active: false} ],
    
  },
  methods: {
    onTagClick: function(i) {
       this.tags[i].active = !this.tags[i].active ;
    }
  }
})

li {
  display: inline-block;
  padding: 8px 10px;
  margin-right: 0.5rem;
}

a {
color: #000;
  text-decoration: none;
}

li.active>a{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div id="example-1">
  <ul v-if="tags">
    <li v-for="(obj, i) in tags" :key="i" :class="{active: obj.active}" >
        <a @click="onTagClick(i)"  href="javascript:void(0)">{{ obj.tag }}</a>
    </li>
</ul>

​

Answer 2

模板

<li v-for="(tag, index) in tags" :key="index" :class="{active: tag.active}">
    <a href="#" @click.prevent="tag.active = !tag.active">{{ tag.name }}</a>
</li>

脚本

  computed: {
    checked(){ return this.tags.filter(tag => tag.active).map(tag => tag.name)}
  },
  data() {
    return {
      tags: [
        {name:'tag-1', active: false},
        {name:'tag-2', active: false},
        {name:'tag-3', active: false},
        {name:'tag-4', active: false}
      ]
    }
  }

完整的样本。Check this out

<template>
  <ul v-if="tags">
    <li v-for="(tag, index) in tags" :key="index" :class="{active: tag.active}">
      <a href="#" @click.prevent="tag.active = !tag.active">{{ tag.name }}</a>
    </li>
  </ul>
  <div>
    {{checked}}
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  computed: {
    checked(){ return this.tags.filter(tag => tag.active).map(tag => tag.name)}
  },
  data() {
    return {
      tags: [
        {name:'tag-1', active: false},
        {name:'tag-2', active: false},
        {name:'tag-3', active: false},
        {name:'tag-4', active: false}
      ]
    }
  }
});
</script>
<style>
li {
  display: inline-block;
  padding: 8px 10px;
  margin-right: 0.5rem;
}

a {
color: #000;
  text-decoration: none;
}
li.active>a{
  color: red;
}
</style>

Answer 3

以下是我的解决方案

<template>
  <div>
    <span
      v-for="element in array"
      :key="element.id"
      :class="{ red: element.active }"
      @click="toggleSelection(element)"
    >
      {{ element.label }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        { id: 1, label: 'tag1', active: false },
        { id: 2, label: 'tag2', active: false },
        { id: 3, label: 'tag3', active: false },
      ],
    }
  },
  methods: {
    toggleSelection(element) {
      const selectedElementIndex = this.array.findIndex((item) => item.id === element.id)
      this.array[selectedElementIndex].active = !this.array[selectedElementIndex].active
    },
  },
}
</script>

<style scoped>
.red {
  color: red;
}
</style>

我仍然强烈建议您更新数组并给它一个真正的惟一ID，而不是将index传递给:key，这实际上与它应该做的事情相反。

要获得具有良好键的友好数组，可以在当前的tags上使用以下命令

this.array = tags.map((tag, index) => ({id: index, label: tag, active: false}))

您可以在从async created()钩子中提取数据后调用此方法，更改它，然后将其插入到您的模板中，从而将结构修改为更友好的格式。