我想创建一个待办事项名录应用。这是我的代码: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。希望有人在这里看到的问题。
我使用的是什么,你已经做了一个快速的片段,我相信这符合您的期望。
刚刚尝试并运行该代码段; 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>
代码本身应该是不言自明的,但要指出,我所做的更改: