Question

大家好，

我创建了一个简单的CRUD operation in VueJS.，值是   插入一个列表，我只能从那里读取它，也可以   从列表中删除它。但是问题是当我尝试更新任何   值，它没有更新。谁能帮我解决这个问题。我是吗   做错了什么。请让我知道。

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>    
</head>
    <body>
    <div id="app">
        <form v-on:submit.prevent="addToDo">
            <input v-model="currentTodos" type=text><br><br>
            <button type="submit">Add To List</button>
        </form>
        <ul>
            <li v-for="(todo, index) in todos">
                {{todo}}<button v-on:click="deleteItemFromList(index)">X</button><button v-on:click="updateItemList(index)">#</button>
            </li>
        </ul>
    </div>
    <div v-html="htmlContent"></div>    
    </body>
    <script>
        new Vue({
            el: "#app", // el is the DOM element.
            data:{
                 todos:['push', 'pop', 'paste'],
                 currentTodos: '',
                htmlcontent : "<div><input type="text"></div>"
            },
            methods:{
                addToDo: function(){
                 this.todos.push(this.currentTodos);
                 this.currentTodos = '';   
                },

                deleteItemFromList: function(index){
                    this.todos.splice(index,1)
                },

                updateItemList: function(index){
                    this.todos.set(index,1)
                }
            }
        })
    </script>
</html>

Answer 1

Reactivity在这里不起作用。更改todos数组时分配一个新的Array引用，或者您可以使用this.$set(...)来使反应性起作用。

methods:{
  addToDo: function(){
    this.todos.push(this.currentTodos);
    // assign a new Array reference in this.todos
    this.todos = [...this.todos];
    this.currentTodos = '';   
  },

  deleteItemFromList: function(index){
    this.todos.splice(index,1);
    this.todos = [...this.todos];
  },

  updateItemList: function(index){
    this.todos[index] = '1';
    this.todos = [...this.todos];
  }
}

<template>
...
<li v-for="(todo, index) in todos" :key="todo">
    {{todo}}
    <button v-on:click="deleteItemFromList(index)">X</button>
    <button v-on:click="updateItemList(index)">#</button>
</li>
...
</template>

还要在:key="todo"中添加v-for

在Vuejs中更新列表项时出错

1 个答案: