CODEWITHSUNDEEP
mongodbexpressvue.js
COLEAN
COLEAN

Reputation: 695

How to change the state of a vue when you click the check button

I am creating a Todo Application using Vue.js, Express.js, and MongoDB.

I want to change the state of the fields that appear as v-for through the checkbox.

The code I want is to change the state of the text when the checkbox is checked and to show another element with v-if.

Here is the code I wrote: But it does not work.

If I have the wrong code, please help me.

List Component

<template>
  <div class="todos">
    <div v-for="todo in todos" v-bind:key="todo._id" class="todo">
        <div>
          <input type="checkbox" v-model="todo.done" v-on:click="completeTodo(todo)">
          <del v-if="todo.done">{{todo.title}}</del>
          <strong v-else>{{todo.title}}</strong>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      todos: {}
    }
  },
  created () {
    this.$http.get('/api/todos')
    .then((response) => {
      this.todos= response.data
    })
  },
  methods: {
    completeTodo (todo) {
      todo.done = !todo.done
    }
  }
}
</script>

Upvotes: 0

Views: 2067

Answers (1)

Krantisinh
Krantisinh

Reputation: 1729

You don't need v-on:click="completeTodo(todo)". v-model is already doing the trick for you. Also, the todos in your code should be defined and instantiated as array not an object.

v-model is used for two way data binding. That means, whatever data you pass from your code will be bound to the checkbox value in this case and whenever a change is made from UI and value of checkbox is altered by user, that will be captured in v-model variable. v-model is a combo of :value prop and @change event in case of checkbox, hence, it is able to update data in both the ways.

Please refer this snippet.

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      {
        id: 1,
        title: 'Study',
        done: false
      },
      {
        id: 2,
        title: 'Work',
        done: false
      },
      {
        id: 3,
        title: 'Play',
        done: false
      }
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"> 
  <div class="todos">
    <div v-for="todo in todos" :key="todo.id">
        <div>
          <input type="checkbox" v-model="todo.done"/>
          <del v-if="todo.done">{{todo.title}}</del>
          <strong v-else>{{todo.title}}</strong>
        </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions