方法调用后，输入中的值不会更新

Question

I would like to create a todo-List app. Here is my Code: 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>

script:

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


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

My problem is as soon as I add the v-for part into my html code that my value doesn't get updatet to a emtpy string as it should. If I comment the v-for part out, the value attribute gets updatet. Hope somebody sees problem here.

Answer 1

I've made a quick snippet using what you've already made, I believe this fits your expectations.

Just try and run the snippet ;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> 

The code itself should be self-explanatory, but to point out the changes I've made:

1. Removed the this from the v-for
2. Changed the way to reset the value from the input by using Vue's v-model interface through changing task data