Попытка редактировать данные в VueJS при использовании часов

Question

Попытка редактировать данные в VueJS при использовании часов

1

Я пытаюсь изучить 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/[email protected]/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')

antfuentes87 08 сен. 2017, в 05:23

Источник

0

Если возможно, было бы очень полезно, если бы вы могли предоставить gif этой проблемы.
IzumiSy 08 сен. 2017, в 08:52

Теги:

javascript

python

vue.js

axios

python-3.6

1 ответ

Ещё вопросы

Если возможно, было бы очень полезно, если бы вы могли предоставить gif этой проблемы.

IzumiSy · Accepted Answer · 2017-09-08T06-08-00.000Z

Возможно, что v-model="todo.keyword" изменяет содержимое todos, поскольку оно ссылается на один элемент в todos. Затем, по keyword редактирования, он запускает часы для todos и они обновляются с данными вашего сервера API.

Хорошо, это имеет смысл, есть ли способ обойти это?
Не используйте watch . Извлечение всех задач вручную в последнем из addTodo / removeTodo / doneTodo , вместо этого.
Я уже делал это раньше, я просто не знал, есть ли способ использовать watch вместо этого. Я только что создал другой метод с именем updateTodos и просто вызываю его в конце addTodo / removeTodo / doneTodo . Спасибо за вашу помощь, я ценю это.