如何将输入的值添加到 li 列表?
How to add the value of an input to a li list?
我正在尝试将输入的值作为 <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/
您总是在引用 属性,您应该像这样正确地克隆它:
let t={};
Object.assign(t,this.todo)
this.todos.push( t );
我在你的代码中看到的另一个问题是你删除了错误的待办事项,要解决这个问题,只需将所选待办事项的索引传递给 deleteTodo
方法,如下所示:
<ul>
<li v-for="(todo,i) in todos" :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
{{ todo.task }} <span v-on:click="deleteTodo(i)">{{ todo.delete }}</span>
</li>
</ul>
并使用 this.todos.splice(i,1);
删除给定的待办事项:
deleteTodo: function(){
this.todos.splice(i,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/
我正在尝试将输入的值作为 <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/
您总是在引用 属性,您应该像这样正确地克隆它:
let t={};
Object.assign(t,this.todo)
this.todos.push( t );
我在你的代码中看到的另一个问题是你删除了错误的待办事项,要解决这个问题,只需将所选待办事项的索引传递给 deleteTodo
方法,如下所示:
<ul>
<li v-for="(todo,i) in todos" :class="{ completed: todo.isActive }" @click="$set(todo, 'isActive', !todo.isActive)">
{{ todo.task }} <span v-on:click="deleteTodo(i)">{{ todo.delete }}</span>
</li>
</ul>
并使用 this.todos.splice(i,1);
删除给定的待办事项:
deleteTodo: function(){
this.todos.splice(i,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/