Apply styles to specific v-for element

Question

I'm making a simple todo list app, and wondering on how to apply styles on only specific dynamic v-for elements.

<f7-list-item v-for="(listItem, index) in activeList.listItems" :key="index" :class="(checked) ? 'checked':'not-checked'">
 {{ index+1 }}. {{ listItem }}
  <span @click="checkTaskDone(index)">
    <i class="f7-icons" id="check-task-btn">check_round</i>
  </span>
</f7-list-item>

export default {
 data() {
  return {
   checked: false
  }
 },
 methods: {
  checkTaskDone(item) {
   if (this.checked == false) {
    this.checked = true;
   } else if (this.checked == true) {
    this.checked = false;
   }
  }
 }
}

.checked {
 text-decoration: line-through;
 color: #444;
}

With this code it adds the class to every single v-for list element regardless of which one is clicked, as expected. I'm wondering what's the best approach to deal with this. I've experimented with making a prop from the index and trying to target that to apply the styles but I couldn't make it work.

Thanks in advance!

Answer 1

Typically you want to have a "done" or "checked" flag on the individual to-do items, something like:

const todoList = [
  {
    name: 'Grab some food',
    done: false
  },
  {
    name: 'Start coding',
    done: false
  }
];

And in Vue.js, you could do the class toggling with v-bind:class rather than ternary operator:

export default {
  data() {
    return {
      //checked: false,
      
      activeList: {
        listItems: [
          {
            name: 'Grab some food',
            done: false
          },
          {
            name: 'Start coding',
            done: false
          }
        ]  
      }
    }
  },
  methods: {
    checkTaskDone(item) {
      //if (this.checked == false) {
      //  this.checked = true;
      //} 
      //else if (this.checked == true) {
      //  this.checked = false;
      //}
      
      // Check/uncheck
      item.done = !item.done;
    }
  }
}

<f7-list-item 
  v-for="(listItem, index) in activeList.listItems" 
  :key="index"
  :class="{ 'checked': listItem.done }">
  
 {{ index + 1 }}. {{ listItem }}
 
  <span @click="checkTaskDone(listItem)">
    <i class="f7-icons" :id="`check-task-btn${index}`">check_round</i>
  </span>
</f7-list-item>

BTW, I'm appending an index on the individual i.f7-icons elements because ID should be unique, otherwise please use class instead.