Accessing the current instance in Vue when triggered by a checkbox event

Question

Accessing the current instance in Vue when triggered by a checkbox event

Recently, I tested out a to-do-list application built in Vue that has a checkbox feature to mark completed items. I'm looking for a way to access the current instance from the checkbox event. Here's what I've accomplished so far:

myObject = new Vue({
      el: '#app',
      data: {
        todos: [{
            id: 1,
            title: 'Learn HTML',
            completed: true
          },
          {
            id: 2,
            title: 'Learn CSS',
            completed: false
          }
        ]
      },
      methods: {
        markComplete() {
          debugger
          this.completed = !this.completed;
        }
      }

    })

       .is-complete {
            text-decoration: line-through;
        }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
      <ul>
        <li v-for="(item,key) in todos" v-bind:class="{'is-complete':item.completed}">
          <input type="checkbox" v-on:change="markComplete" :checked="item.completed"> {{ item.title }}
        </li>
      </ul>
    </div>

javascript vue.js

Answer 1

Answer №1

Here is a solution I came up with for VUEjs, even though I'm new to it.

To mark an item as complete, pass the item to the markComplete function using v-on:change="markComplete(item)". Then toggle the item.completed property like this:

markComplete(e) {
   e.completed = !e.completed
 }

Take a look at the code snippet below and see if it meets your requirements:

myObject = new Vue({
      el: '#app',
      data: {
        todos: [{
            id: 1,
            title: 'Learn HTML',
            completed: true
          },
          {
            id: 2,
            title: 'Learn CSS',
            completed: false
          }
        ]
      },
      methods: {
        markComplete(e) {
          e.completed = !e.completed
        }
      }

    })

.is-complete {
            text-decoration: line-through;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
      <ul>
        <li v-for="(item,key) in todos" v-bind:class="{'is-complete':item.completed}">
          <input type="checkbox" v-on:change="markComplete(item)" :checked="item.completed"> {{ item.title }}
        </li>
      </ul>
    </div>

Answer 2

Here is a solution I came up with for VUEjs, even though I'm new to it.

To mark an item as complete, pass the item to the markComplete function using v-on:change="markComplete(item)". Then toggle the item.completed property like this:

markComplete(e) {
   e.completed = !e.completed
 }

Take a look at the code snippet below and see if it meets your requirements:

myObject = new Vue({
      el: '#app',
      data: {
        todos: [{
            id: 1,
            title: 'Learn HTML',
            completed: true
          },
          {
            id: 2,
            title: 'Learn CSS',
            completed: false
          }
        ]
      },
      methods: {
        markComplete(e) {
          e.completed = !e.completed
        }
      }

    })

.is-complete {
            text-decoration: line-through;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
      <ul>
        <li v-for="(item,key) in todos" v-bind:class="{'is-complete':item.completed}">
          <input type="checkbox" v-on:change="markComplete(item)" :checked="item.completed"> {{ item.title }}
        </li>
      </ul>
    </div>

Accessing the current instance in Vue when triggered by a checkbox event

Answer №1

Similar questions

The technique of binding methods in React

What's the reason behind the console showing an uncaught promise error message?

It seems that the maximum call stack size has been exceeded, resulting in a

Tips for retrieving the ajax results for multiple deferred calls using jQuery

several javascript onclick event listeners for manipulating the DOM

Encountering VueX actions and mutations problem in Chrome developer tools

What are the steps to convert a canvas element, using an image provided by ImageService as a background, into a downloadable image?

JavaScript: A dynamic table is created with columns populated by JSON data. The row structure is compromised

NextAuth.js in conjunction with nextjs version 13 presents a unique challenge involving a custom login page redirection loop when using Middleware - specifically a

How can we bring in prop array values in React?

Establishing the default value of an input field in Angular by referencing another field

Transmit information via ajax and receive responses in json format

Creating a rectangular pyramid using three.js r68: a step-by-step guide

Select a division and retrieve the identification of a different division

What happens when Image Buttons are clicked in SAPUI5 and their onchange event is triggered

I am experiencing an issue with environment variables not appearing in my Context component on Next.js. Should I adjust the Next.js configuration or set up the Context to properly utilize the variables?

VueJS: The current date is before today's date when using Date.now

Is the $scope object shared among all controllers in AngularJS when nested controllers are used?

Issue with Backbone collection not being updated despite making a JSONP request

What is the best way to revert the Highcharts bar color back to its default color?