[Vuejs]-Changing style of text once checkbox marked

by

0👍

✅

Use conditional rendering like this:

<span :style="todo.completed ? 'text-decoration: line-through' : ''">{{todo.title}}</span>

Take a look at this simple mock-up: Vue Playgound

<script setup>
import { ref } from 'vue'
const todos = ref([
  {title: "Milk", completed: true},
  {title: "Bread", completed: false},
  {title: "Cheese", completed: true},
  {title: "Chicken", completed: false},
])
</script>
<template>
  <template v-for="todo in todos" :key="todo.title">
    <p>
      <input type="checkbox" v-model="todo.completed" /> <span :style="todo.completed ? 'text-decoration: line-through' : ''">{{todo.title}}</span>
    </p>
  </template>
</template>

Leave a comment