nuxtjs 在点击元素时添加和删除 class

Question

我是 vue 和 nuxt 的新手，这是我需要更新的代码

<template>
  <div class="dashContent">
    <div class="dashContent_item dashContent_item--active">
      <p class="dashContent_text">123</p>
    </div>
    <div class="dashContent_item">
      <p class="dashContent_text">456</p>
    </div>
    <div class="dashContent_item">
      <p class="dashContent_text">789</p>
    </div>
  </div>
</template>

<style lang="scss">
.dashContent {
  &_item {
    display: flex;
    align-items: center;
  }
  &_text {
    color: #8e8f93;
    font-size: 14px;
  }
}
.dashContent_item--active {
  .dashContent_text{
    color:#fff;
    font-size: 14px;
  }
}
</style>

我试过这样的事情：

<div @click="onClick">

methods: {
  onClick () {
    document.body.classList.toggle('dashContent_item--active');
  },
},

但它更改了所有元素，我只需要在我单击的元素上更改样式，并在单击另一个元素时将其删除此代码还将活动 class 添加到主体而不是我单击的元素

Answer 1

这是获取可切换水果列表的方法，每个水果都有一个特定的 class。

<template>
  <section>
    <div v-for="(fruit, index) in fruits" :key="fruit.id" @click="toggleEat(index)">
      <span :class="{ 'was-eaten': fruit.eaten }">{{ fruit.name }}</span>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ToggleFruits',
  data() {
    return {
      fruits: [
        { id: 1, name: 'banana', eaten: false },
        { id: 2, name: 'apple', eaten: true },
        { id: 3, name: 'watermelon', eaten: false },
      ],
    }
  },
  methods: {
    toggleEat(clickedFruitIndex) {
      this.fruits = this.fruits.map((fruit) => ({
        ...fruit,
        eaten: false,
      }))
      return this.$set(this.fruits, clickedFruitIndex, {
        ...this.fruits[clickedFruitIndex],
        eaten: true,
      })
    },
  },
}
</script>

<style scoped>
.was-eaten {
  color: hsl(24, 81.7%, 49.2%);
}
</style>

在Vue2中，我们需要使用this.$set否则，数组特定位置发生变化的元素将不会被检测到。 official documentation.

中提供了更多信息

nuxtjs 在点击元素时添加和删除 class

nuxtjs add and remove class on click on elements

onclick

vue.js

nuxt.js