javascript - 我只想显示一个点击的输入(在 vue.js 上)
问题描述
我想在点击时显示一个输入,但是在一个 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>
我希望单击 THIS-CLICK 时,只有一个输入(单击的按钮的输入)可见,但是处于 for 循环中我不知道是否可以完成
解决方案
我建议在您的应用程序中稍微更改结构。您可以通过在按钮内使用 v-if 而不是两个不同的按钮来大量清理代码。
此外,将尽可能多的 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)"
推荐阅读
- html - Angular 8 - 是否可以使用从外部源加载的模板执行数据绑定?
- reactjs - 如何在 NextJS 中向 Router.push 添加查询参数?
- postgresql - 将游标记录提取到数组中引发错误
- java - remove all occurences of a specific attribute from a XML
- php - Best practices for updating from mysql to PDO
- stripe-payments - Stripe 中不同的续订价格
- r - How to determine which fold was finally used as a test in CV?
- image - 带有实时馈送的边界框的波动
- c++ - 试图通过指针映射访问类成员
- python - paramiko SSHClient sudo 到新用户