Question

我一直在努力学习VueJS，而且大部分时间我都在努力学习。当我双击标签时，我遇到了一个问题，要编辑该条目，它将变为输入，然后快速切换回标签（不允许我编辑条目）。现在，如果我注释掉手表，它可以工作，但当然它不会显示更新的数据（除非我刷新页面）。当我使用手表时，为什么我不能编辑某些内容？

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" href="index.css">
  </head>
  <body>
   <section class="todoapp">
    <input class="new-todo"
    autofocus autocomplete="off"
    placeholder="What needs to be done?"
    v-model="newTodo"
    @keyup.enter="addTodo">
    <section class="main" v-show="todos.length" v-cloak>
     <ul class="todo-list">
      <li v-for="todo in todos"
      class="todo"
      :key="todo.id"
      :class="{ editing: todo == editedTodo }">
       <div class="view">
        <label @dblclick="editTodo(todo)">{{ todo.keyword }}</label>
        <button class="destroy" @click="removeTodo(todo)"></button>
       </div>
       <input class="edit" type="text"
       v-model="todo.keyword"
       v-todo-focus="todo == editedTodo"
       @blur="doneEdit(todo)"
       @keyup.enter="doneEdit(todo)"
       @keyup.esc="cancelEdit(todo)">
      </li>
     </ul>
    </section>
  </section>
  <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="app.js"></script>
 </body>
</html>

app.js

var app = new Vue({
 data: {
  todos: [],
  newTodo: '',
  editedTodo: null
 },
 mounted() {
  axios.get('/cgi-bin/select.py').then((response) => {
   this.todos = response.data;
  }).catch((err) => {
   console.log(err);
  });
 },
 watch: {
  todos: function () {
   axios.get('/cgi-bin/select.py').then((response) => {
    this.todos = response.data;
   }).catch((err) => {
    console.log(err);
   });
  }
 },
 methods: {
  addTodo: function () {
   var value = this.newTodo && this.newTodo.trim()
   if (!value) {
    return
   }
   axios.post('/cgi-bin/blacklist_insert.py', {
    keyword: value
   })
   .then(response => {
    console.log(response.data)
   })
   .catch(function (error) {
    console.log(error);
   });
   this.newTodo = ''
  },
  removeTodo: function (todo) {
   axios.post('/cgi-bin/delete.py', {
    id: todo.id
   })
   .then(response => {
    console.log(response.data)
   })
   .catch(function (error) {
    console.log(error);
   });
  },
  editTodo: function (todo) {
   this.beforeEditCache = todo.keyword
   this.editedTodo = todo 
  },
  doneEdit: function (todo) {
   if (!this.editedTodo) {
    return
   }
   this.editedTodo = null
   todo.keyword = todo.keyword.trim()
   if (!todo.keyword) {
    this.removeTodo(todo)
   }
   axios.post('/cgi-bin/update.py', {
    id: todo.id,
    keyword: todo.keyword
   })
   .then(response => {
    console.log(response.data);
   })
   .catch(function (error) {
    console.log(error);
   });
  },
  cancelEdit: function (todo) {
   this.editedTodo = null
   todo.keyword = this.beforeEditCache
  }
 },
 directives: {
  'todo-focus': function (el, binding) {
   if (binding.value) {
    el.focus()
   }
  }
 }
})
app.$mount('.todoapp')

Answer 1

这可能是v-model="todo.keyword"更改了todos的内容，因为它引用了todos中的一个项目。然后，在您的修改keyword上，它会触发todos的监视，并使用您的API服务器中的数据强制更新它们。

尝试在使用手表时编辑VueJS中的数据

1 个答案: