我正在Vue应用上工作-很简单地说一个待办事项清单,例如以下示例。但是我想在提交时隐藏我的输入字段(因此只显示输出,因为它已经这样做了),所以我可以进行一个很好的过渡,因为每个输入字段只能添加一项。
希望有人可以帮助我提供一个好的解决方案!
https://jsfiddle.net/541rd96r/
new Vue({
el: "#madplan",
data: {
newTask_mandag: "",
taskList_mandag: [],
},
methods: {
addTask_mandag: function() {
var task = this.newTask_mandag.trim();
if (task) {
this.taskList_mandag.push({
text: task
});
this.newTask_mandag = "";
}
},
removeSubTask_mandag: function(task) {
var index = this.taskList_mandag.indexOf(task);
this.taskList_mandag.splice(index, 1);
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="madplan">
<section>
<section class="prefetch" class="panel">
<input class="input typeahead" type="text" placeholder="Tilføj ret til madplanen" v-model="newTask_mandag " v-on:keyup.enter="addTask_mandag">
</section>
<details v-for="task in taskList_mandag" v-bind:key="task.text" class="sub-list-item">
<summary>{{ task.text }} <button v-on:click="removeSubTask_mandag(task)">X</button></summary>
</details>
</section>
</div>
最佳答案
在input
标记上添加指令v-if='showInput'
以有条件地显示该元素。然后添加计算出的属性以确定条件,如下所示
computed: {
showInput: function() {
return !this.taskList_mandag.length
}
},