VueJS-如何在v-for循环中启用/禁用特定的输入

Question

我需要在单击按钮时启用/禁用特定的输入。

我的问题是，当我点击我的按钮时，所有的输入都启用/禁用我很难针对一个输入。我使用道具"articles"，它返回我文章的"id"、"title"one_answers"body"。

<div v-for="(article, index) in articles" v-bind:key="article.id">
<div class="flex">
<div class="flex-1 px-2 py-2">
<input
v-model="article.title"
type="text"
:disabled="isDiabled"
class="w-full disabled:opacity-75 bg-gray-300 focus:bg-white"
/>
</div>
<div class="flex-1 px-2 py-2">
<input
v-model="article.body"
type="text"
:disabled="isDiabled"
class="w-full disabled:opacity-75 bg-gray-300 focus:bg-white"
/>
</div>
<div class="px-2 py-2">
<button
class="px-2 py-2 border-gray-400 bg-gray-800 rounded text-white hover:border-gray-300 items-end"
@click="enableEdit"
>
Edit
</button>
</div>
</div>
</div>
<script>
export default {
props: ["articles"],
data() {
return {
isDiabled: true,
};
},
methods: {
enableEdit() {
this.isDiabled = false;
},
},
};
</script>

每一篇文章都有自己的按钮，我只想启用/禁用按钮的两个输入，而不是全部。

Answer 1

作为指向，您还需要将该属性添加到文章中。。。当然，您不需要在数据库中执行此操作，仍然将其用作属性，还需要将标志的更改发送给父级。

你也可以使用本地版本的文章，在那里你还添加了这个isDisabled属性，你在创建组件时填充这个新变量，当然是基于你从父级收到的属性

created(){
this.local_articles = this.articles.map(e => { 
return {...e, isDisabled: true} }
)
},

通过这种方式，您不需要向父级传播任何内容，因为您可以在内部处理所有内容。

这把小提琴能解决你的问题。

Answer 2

为每个项目创建一个布尔属性，然后将disabled的绑定更改为该属性。