:class not updating when clicked in vuejs v-for

Question

I want to add a css class to a item in v-for when the td in clicked

      <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>

I want a line to go through the items when clicked, but the dom doesn't update. If I go into the vue tab in chrome I can see the force.done changes for each item but only if I click out of the object and click back into it. I'm not to sure why the state isn't updating as it's done so when I have used an click and a css bind before.

Answer 1

I've tried to make minimal changes to get this working:

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

const apiService = {
  getForces () {
    return Promise.resolve([
      { id: 1, name: 'Red' },
      { id: 2, name: 'Green' },
      { id: 3, name: 'Blue' }
    ])
  }
}

new Vue({
  el: '#app',
  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) => {
          for (const force of data) {
            force.done = false;
          }

          this.forces = data;
          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);
    }
  },

  mounted() {
    this.getForces();
  }
})

.completed {
  text-decoration: line-through;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <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>
          <th>Delete</th>
        </tr>
        
      </thead>
      <tbody>
        <tr v-for="(force, index) in forces" @click="completeTask(force)" :class="{completed: force.done}"  v-bind:key="index">

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

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

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

The key problem was here:

this.forces = data;
this.forces.map(function(e){
  e.done = false;
});

The problem here is that the property done is being added to the data after it has been made reactive. The reactivity observers get added as soon as the line this.forces = data runs. Adding done after that counts as adding a new property, which won't work.

It's also a misuse of map so I've switched it to a for/of loop instead.

for (const force of data) {
  force.done = false;
}

this.forces = data; // <- data becomes reactive here, including 'done'

On an unrelated note I've tweaked the template to move the Delete header inside the top row.