Vue.js ：在vuejs v-for中单击时未更新类

我想在单击td-in时向v-for中的项目添加一个css类

      <template>
  <div>
    <h1>Forces ()</h1>

    <section v-if="errored">
      <p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
    </section>

    <section v-if="loading">
      <p>loading...</p>
    </section>

    <table class="table table-bordered table-hover">

      <thead>
        <tr>
          <th>#</th>
          <th>ID</th>

          <th 
              @click="orderByName = !orderByName">Forces</th>
        </tr>
        <th>Delete</th>
      </thead>
      <tbody>
        <tr v-for="(force, index) in forces" @click="completeTask(force)" :class="{completed: force.done}"  v-bind:key="index">

          <td>
            <router-link :to="{ name: 'ListForce', params: { name: force.id } }">Link</router-link>
          </td>

          <th>{{ force.done }}</th>

          <th>{{ force.name }}</th>
          <th><button v-on:click="removeElement(index)">remove</button></th>

        </tr>
      </tbody>
    </table>
    <div>
    </div>
  </div>

</template>


<script>
import {APIService} from '../APIService';
const apiService = new APIService();
const _ = require('lodash');

export default {

  name: 'ListForces',

  components: {

  },

  data() {
    return {
      question: '',
      forces: [{
        done: null,
        id: null,
        name: null
      }],
      errored: false,
      loading: true,
      orderByName: false,
    };

  },

  methods: {
    getForces(){
      apiService.getForces().then((data, error) => {

          this.forces = data;
          this.forces.map(function(e){
               e.done = false;
          });
          this.loading= false;
        console.log(this.forces)
      });
    },
    completeTask(force) {
      force.done = ! force.done;
      console.log(force.done);
    },
    removeElement: function (index) {
      this.forces.splice(index, 1);
    }
  },

  computed: {
/*    forcesOrdered() {
      return this.orderByName ? _.orderBy(this.forces, 'name', 'desc') : this.forces;
    }*/
  },
  mounted() {
    this.getForces();
  },
}
</script>

<style>
    .completed {
        text-decoration: line-through;
    }
</style>

力量（）
很抱歉，我们目前无法检索此信息，请稍后再试

加载

#
身份证件
军队
删除
链接
{{force.done}
{{force.name}
去除
从“../APIService”导入{APIService}；
const apiService=新的apiService（）；
const=require（'lodash'）；
导出默认值{
名称：“ListForces”，
组成部分：{
},
数据（）{
返回{
问题：''，
部队：[{
完成：空，
id:null，
名称：空
}],
错误：错误，
加载：对，
orderByName:false，
};
},
方法：{
getForces（）{
apiService.getForces（）.then（（数据，错误）=>{
这个。力=数据；
此.forces.map（函数（e）{
e、 完成=错误；
});
这个。加载=假；
console.log（this.forces）
});
},
完成任务（强制）{
force.done=！force.done；
控制台日志（强制完成）；
},
removeElement:函数（索引）{
此力接合（索引1）；
}
},
计算：{
/*forcesOrdered（）{
返回this.orderByName？\ u.orderBy（this.forces，'name'，'desc'）：this.forces；
}*/
},
安装的（）{
这个.getForces（）；
},
}
.完成{
文字装饰：线条贯通；
}

---

我想要一行在单击时遍历这些项目，但是dom不会更新。如果我进入chrome中的vue选项卡，我可以看到每个项目的force.done更改，但前提是我单击对象外并单击返回。我不确定为什么状态没有更新，因为我以前使用过单击和css绑定。请确保在初始化之前，

数据

中的

force.done

设置为

false

，因此它是被动的

data() {
  return {
    force:{
      done: false;
    }
  }
}

如果

force

存在，但没有

done

成员集，则可以使用

Vue.set

而不是

=

在初始化后创建反应值

Vue.set(this.force, 'done', true);

---

我已尝试进行最小的更改以使其正常工作：

//从“../APIService”导入{APIService}；
//const apiService=新的apiService（）；
//const=require（'lodash'）；
常数apiService={
getForces（）{
还愿([
{id:1，名称：'Red'}，
{id:2，名称：'Green'}，
{id:3，名称：'Blue'}
])
}
}
新Vue({
el:“#应用程序”，
名称：“ListForces”，
组成部分：{
},
数据（）{
返回{
问题：''，
部队：[{
完成：空，
id:null，
名称：空
}],
错误：错误，
加载：对，
orderByName:false，
};
},
方法：{
getForces（）{
apiService.getForces（）.then（（数据，错误）=>{
for（数据常量）{
force.done=false；
}
这个。力=数据；
这个。加载=假；
console.log（this.forces）
});
},
完成任务（强制）{
force.done=！force.done；
控制台日志（强制完成）；
},
removeElement:函数（索引）{
此力接合（索引1）；
}
},
安装的（）{
这个.getForces（）；
}
})

。已完成{
文字装饰：线条贯通；
}

力量（）
很抱歉，我们目前无法检索此信息，请稍后再试

加载

#
身份证件
军队
删除
{{force.done}
{{force.name}
去除

听起来像是反应性问题。

forcesOrdered

从何而来？它是在组件

数据

或存储

状态

中定义的吗？您可能想尝试使用

this.$set（强制“完成”，true）

来查看它是否有效。它没有解决潜在的问题，但有助于确认这是一个反应性问题。

done

是这些对象上的现有属性还是您将其添加到

completeTask

？您好，是的，它是objectforcesOrdered中的一个属性。this.$set（force，'done'，true）中，但与之前相同，该值已更新，但未在屏幕上更新