输入中的值在方法调用后没有得到更新

Question

我想创建一个待办事项列表应用程序。这是我的代码： HTML:

<div class="divPadder">
  <input ref="makePlaceholderEmpty" class="inputBoxSize" type="text" :placeholder="placeholder"v-model="task">
  <ul>
    <li v-for="(item,index) in this.tasks" :key="index">{{item}}</li>
  </ul>
</div>
<button class="button" v-on:click="pushAndMakePCEmpty">Submit</button>

脚本：

data() {
return {
  placeholder:"put your notes here :)))",
  task: "",
  tasks: []
};


},
  methods: {
    pushAndMakePCEmpty() {
      this.$refs.makePlaceholderEmpty.value = "";
      this.tasks.push(this.task);
    }
  }

我的问题是，一旦我将 v-for 部分添加到我的 html 代码中，我的值就不会像它应该的那样更新为空字符串。如果我将 v-for 部分注释掉，值属性会更新。希望有人在这里看到问题。

Answer 1

我使用您已经制作的内容制作了一个快速片段，我相信这符合您的期望。

只需尝试运行片段 ;D

new Vue({
  el: '#app',
  data() {
   return {
      placeholder:"put your notes here :)))",
      task: "",
      tasks: []
    }
  },
  methods: {
    pushAndMakePCEmpty() {
      this.tasks.push(this.task);
      this.task = "";
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="divPadder">
  <input ref="makePlaceholderEmpty" class="inputBoxSize" type="text" :placeholder="placeholder"v-model="task">
  <ul>
    <li v-for="(item,index) in tasks" :key="index">{{item}}</li>
  </ul>
</div>
<button class="button" v-on:click="pushAndMakePCEmpty">Submit</button>
</div>

代码本身应该是不言自明的，但要指出我所做的更改：

从 v-for

this

更改了通过更改 task data

输入中的值在方法调用后没有得到更新

Value inside input doesn't get updatet after method call

javascript

vue.js

v-for