Question

所以我正在使用VueJS创建一个简单的待办事项列表应用程序：

<template>
    <div>
      <br/>
      <div id="centre">
        <div id="myDIV" class="header">
          <h2 style="margin:5px">My To Do List</h2>
          <input type="text" id="myInput" v-model="text" v-on:keyup.enter="AddNote()" placeholder="Title...">
          <span v-on:click="AddNote()" class="addBtn">Add</span>
        </div>

        <ul id="myUL">
          <li v-on:click="ToggleClass(index)" v-for="(item, index) in array" v-bind:class="{ checked: isChecked[index] }">
            {{item}}
            <span class="close">×</span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Notepad",

        data() {
          return {
            array: [],
            text: "",
            isChecked: []
          }
        },

        methods: {
          AddNote: function() {
            if(this.text!=="") {
              this.array.push(this.text);
              this.isChecked.push(false);
              this.text = "";
            }
          },

          ToggleClass(index) {
            console.log(index);
            this.isChecked[index]=!this.isChecked[index];
            console.log(this.isChecked);
          }
        }
    }
</script>

但是，当我单击某个项目时，当我单击它时，v-bind属性不会绑定该类。相反，当我在上面的文本字段中键入内容时，它将绑定它。

有人可以帮忙吗？

Answer 1

ImgView.setImageBitmap(null); ImgView.destroyDrawingCache();阵列没有反应，vue无法检测到更改。您必须通过isChecked或$set来触发它。

在此处详细了解：https://vuejs.org/v2/guide/list.html#Caveats

您可以这样更改代码：

splice

为什么v-bind属性不能正常工作？

1 个答案: