Changing style of text once checkbox marked-CodePudding

I have an app on vue: To Do List. If you are typing something and click add task it goes to the list which is also with checkboxes in front of each item. I want to do text style as line-through once checkbox of particular text item is marked. Please help how to do it on Vue.js faster and easier? Below my code:

Vue.createApp({
    data(){
        return{
          placeholder: 'Start typing',
          inputvalue: '',
          notes: []
        }
    },
    mounted() {
        this.notes = JSON.parse(localStorage.getItem('note')) || [];
      },
      watch: {
            notes: {
                handler: function() {
                    localStorage.setItem('note', JSON.stringify(this.notes));
                },
                deep: true
            }
        },
    methods: {
        addnewtask(){
            if (this.inputvalue !== ''){
                this.notes.push(this.inputvalue)
                this.inputvalue=''
            }
        },
        removetask(index){
            if (confirm('Do you really want to delete?'))
            this.notes.splice(index, 1)
        }
    }
}).mount(app)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
    [v-cloak] {
        display:none;
    }
</style>
<body>
    <div  id="app" v-cloak>
      <div >
          <h1>To Do List</h1>
          <div >
             <input
                 type="text" 
                 v-bind:placeholder="placeholder" 
                 v-model="inputvalue"
                 v-on:keypress.enter="addnewtask"
              />
              <button  v-on:click="addnewtask">Add Task</button>
            </div>
            <hr />
            <ul  v-if="notes.length !== 0"...>
                <li  v-for="(note, index) in notes" v-bind:key="note">
                    <div>
                        <input type="checkbox"/>
                        {{index 1}}) {{note}}
                    </div>
                    <button  v-on:click="removetask(index)">Delete</button>
                </li>
                <hr />
                <li>
                    <strong>Total: {{notes.length}}</strong>
                </li>
            </ul>
            <div v-else>No task exist, please add first one.</div>
      </div>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="Vue3.js"></script>
</body>
</html>

CodePudding user response：

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>