里面输入的值没有方法调用之后更新

问题描述 投票:0回答:1

我想创建一个待办事项名录应用。这是我的代码: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-的一部分到我的html代码,我的价值没有得到updatet到emtpy字符串,因为它应该是。如果我评论的V-的一部分了,价值属性得到updatet。希望有人在这里看到的问题。

javascript vue.js v-for
1个回答
0
投票

我使用的是什么,你已经做了一个快速的片段,我相信这符合您的期望。

刚刚尝试并运行该代码段; 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>

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

  1. 删除了这个从V为
  2. 通过改变任务数据改变使用Vue公司的V型接口,复位从输入值的方式
© www.soinside.com 2019 - 2024. All rights reserved.