温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Vue
javascript vue.js

javascript - Vue

发布于 2020-03-27 16:02:44

我在Vue中试用了此待办事项应用程序,其中有一个复选框标记为已完成待办事项。如何从复选框事件获取当前实例?到目前为止,这是我所做的。

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>

查看更多

查看更多

提问者
Steve
被浏览
144
Akhil Aravind 2020-01-31 16:56

检查此解决方案,(我是VUEjs的新手)。

将项目传递给markComplete功能,例如v-on:change="markComplete(item)",然后切换item.completed

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

检查代码段,希望这是您想要的

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>