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代码中，我的值就不会像应有的那样被更新为emtpy字符串。如果我将v-for零件注释掉，则value属性将更新。希望有人在这里看到问题。

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中删除了此
通过更改任务数据，通过使用Vue的v-model界面，更改了从输入中重置值的方式。

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

1 个答案: