javascript - 如何将输入的值添加到 li 列表?
问题描述
我正在尝试将输入的值作为 a 添加<li>
到<ul>
列表中。
我可以通过将值绑定到 lis 的数组列表来添加它。但是,当我清理输入字段时,它不会留在那里。我怎样才能解决这个问题?
HTML 代码:
<div id="app">
<h1>{{ message }}</h1>
<form v-on:submit.prevent="addNewTodo">
<input type="text" v-model="todo.task">
<button type="submit">Add todo</button>
</form>
<ul>
<li v-for="todo in todos" :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
{{ todo.task }} <span v-on:click="deleteTodo">{{ todo.delete }}</span>
</li>
</ul>
</div>
JS代码:
var app = new Vue({
el: '#app',
data: {
message: 'List of things to do today',
todos: [
{ task: 'Have breakfast', delete:'(x)'},
{ task: 'Go to the gym', delete:'(x)'},
{ task: 'Study Vuejs', delete:'(x)'}
],
todo: {task: '', delete: '(x)'}
},
methods: {
addNewTodo: function(){
this.todos.push( this.todo );
},
deleteTodo: function(){
this.todos.shift( this.todo )
},
}
});
这里有一个示例 JSfiddle:https ://jsfiddle.net/mercenariomode/gwd34815/1/
解决方案
您需要更改对象引用,但在您的情况下,最好将“v-model”绑定到“task”属性
html代码:
<form v-on:submit.prevent="addNewTodo">
<input type="text" v-model="task">
<button type="submit">Add todo</button>
</form>
JS代码:
el: '#app',
data: {
message: 'List of things to do today',
todos: [
{ task: 'Have breakfast', delete:'(x)'},
{ task: 'Go to the gym', delete:'(x)'},
{ task: 'Study Vuejs', delete:'(x)'}
],
task: '',
}
并在 addNewTodo 方法中实现将对象添加到数组的逻辑
addNewTodo: function(){
let todo = {task: this.task, delete: '(x)'};
this.todos.push(todo);
this.task = ''; // clear data in input
},
JSFiddle:https ://jsfiddle.net/nm29yq7d/1/
推荐阅读
- node.js - 即使没有承诺,在执行 CRUD 操作时承诺未决
- android - 如何在“Panorama360”库中实现肖像模式?
- python - 如何替换一个单词,但前提是它不与另一个单词组合?
- haskell - 如何安装`Test.QuickCheck` GHCi 找不到,导入失败
- javascript - 需要在圆包布局d3中固定一个外圆的位置
- presto - 在 presto 中使用 map_agg 函数时应用更多维度
- windows - 如何在批处理文件中将选定的文件从一个文件夹复制到另一个文件夹?
- api - 从不受信任的服务访问外部 API
- amazon-web-services - 从 AWS ECR 存储库中获取特定标记的最新图像
- linux - 编译内核给出错误 No rule to make target 'debian/certs/debian-uefi-certs.pem'