我想在点击时显示输入,但是在for循环中,我只想显示被点击的输入
<div v-for="(todo, n) in todos">
<i class="fas fa-minus ml-2"></i>
<li class="mt-2 todo">
{{ todo }}
</li>
<li class="button-container">
<button class="ml-1 btn btn-primary rounded-circle btn-sm" v-if="isHidden" v-on:click="isHidden = false"><i
class="THIS-CLICK"></i></button>
<input class="ml-5 border border-primary rounded" v-if="!isHidden" v-model="todo">
<button class="ml-1 btn btn-success rounded-circle btn-sm" v-if="!isHidden" v-on:click="isHidden = true"
@click="modifyTodo(n, todo)"><i class="far fa-save"></i></button>
</li>
</div>
我想在单击此单击时,只有一个输入(单击的按钮的输入)可见,但是在for循环中,我不知道是否可以这样做
另外,从标记中移出尽可能多的javascript是一个好习惯。
我在下面有一个完成此操作的示例。
关于您的问题,您必须将密钥添加到每个待办事项。
new Vue({
el: "#app",
data() {
return {
todos: [{
name: 'wash hands',
isHidden: true
},
{
name: 'Stay home',
isHidden: true
}
],
};
},
methods: {
toggleTodo(n, todo) {
const hidden = todo.isHidden;
if (hidden) {
this.modifyTodo(n, todo);
todo.isHidden = false;
} else {
todo.isHidden = true;
}
},
modifyTodo(n, todo) {
//Some logic...
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="(todo, n) in todos">
<i class="fas fa-minus ml-2"></i>
<li class="mt-2 todo">
{{ todo.name }}
</li>
<li class="button-container">
<input class="ml-5 border border-primary rounded" v-if="!todo.isHidden" v-model="todo.name">
<button @click="toggleTodo(n, todo)">
<i v-if="todo.isHidden" class="THIS-CLICK">click-this</i>
<i v-else class="far fa-save">save</i>
</button>
</li>
</div>
</div>
如果无法执行此操作,则可以向数据添加新密钥,例如:hiddenTodos
,它将是ID的数组/您要隐藏的待办事项的唯一标识符。在模板中,将是这样的:
<button @click="hiddenTodos.push(todo)"> ... <div v-if="hiddenTodos.includes(todo)"
isHidden:false
添加到todos
中的每个项目,因此您可以将v-if="todo.isHidden"
更改为onclick
以执行此操作:modifyTodo(n,param)
其中this.todos[n].isHidden=param
将是布尔值(视情况而定)