Vue动态绑定到类不起作用

Question

我在 Vue 组件中有一些复制手风琴的代码，我希望在当前项目处于活动状态时下拉箭头旋转 90 度。但是，无论我尝试什么，都没有任何效果。

<template>
  <div
    class="short-term__table"
    v-for="(credit, index) in credits"
    :key="index"
  >
    <div class="row ribbon">
      
      <div class="col" @click="showDetails(index)">
        <i
          class="caret-right fas fa-caret-right"
          :class="credit.active ? 'active' : ''"
        >
        </i>
      </div>
    </div>
    <CreditDetails v-if="credits[index].active" />
  </div>
</template>

<script>
import CreditDetails from "./credit-item-details.component";
export default {
  components: {
    CreditDetails,
  },
  data() {
    return {
      credits: [
        {

          active: false,
        },
        {
          active: false,
        },
        {
          active: true,
        },
      ],
    };
  },
  methods: {
    showDetails(index) {
      this.credits[index].active = !this.credits[index].active;
    },
  },
};
</script>

<style scoped lang="scss">

  .active {
    transform: rotate(90deg);
  }

</style>

这在创建组件时有效，但是当数据更改时类不会更新？

所以问题： 为什么 credit.active 不更新类绑定。

Answer 1

您正在通过索引更改数组项，这将不起作用。当您通过索引改变数组项时，Vue 无法检测到它并且模板不会重新渲染。 VueJS docs.中提到了这一点

你可以像这样更新数组项：

showDetails(index) {
  this.$set(this.credits, index, {
    ...this.credits[index],
    active: !this.credits[index].active
  })
},

或者像这样：

showDetails(index) {
  this.credits.splice(index, 1, {     
    ...this.credits[index], active: !this.credits[index].active   
  })
}

请深入阅读 VueJS 文档以了解反应性。

Answer 2

在下面的例子中可以正常工作：

const {
  createApp,
  computed,
  onMounted,
  watch
} = Vue;



const app = createApp({
  data() {
    return {
      credits: [{
          title: "title 1",
          active: false,
        },
        {
          title: "title 2",
          active: false,
        },
        {
          title: "title 3",
          active: true,
        },
      ],
    };
  },
  methods: {
    showDetails(index) {
      this.credits[index].active = !this.credits[index].active;
    },
  },
});


app.mount('#app');

.active {
  transform: rotate(90deg);
}

.col {
  display: flex;
  align-items: center;
}

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app">
  <div class="short-term__table" v-for="(credit, index) in credits" :key="index">
    <div class="row ribbon">

      <div class="col" @click="showDetails(index)">
        <h3>{{credit.title}}</h3>
        <i class="caret-right fas fa-caret-right" :class="credit.active ? 'active' : ''">
        >
        </i>

      </div>
    </div>
  </div>
</div>

但我建议将图标名称绑定到活动字段：

<i :class="`caret-${credit.active?'down':'right'} fas fa-caret-${credit.active?'down':'right'}`" >

Answer 3

为了触发 vue 重新渲染，您必须使用 vuejs 中的 this.$set 方法。

将您的methods-block 更改为以下内容：

methods: {
   showDetails(index) {
     this.$set(this.credits[index], 'active', !this.credits[index].active);
   }
 }