VueJS - How to Enable/Disable a specific input in a v-for loop

Question

I need to enable/disable specific inputs on button click.

My problem here is when I click my button, ALL the inputs enable/disable I am having a hard time targeting a single one. I use props “articles” which returns the “id”, “title” and “body” of my articles.

<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>

Every article has his own button and I want only the two inputs of the button that is clicked to be enabled/disabled and not all of them.

daniel · Accepted Answer · 2020-09-22 20:16:03Z

1

As being pointed you need to add also that property to your articles... of course you don't need to do this in the database, still using it as a property you need also to emit this change of the flag to the parent.

You could also use a local version of the articles where you add also this isDisabled property, you fill this new variable at the creation of the component based of course on the property you received from the parent,

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

this way you don't need to propagate nothing to the parent as you can handle all internally.

This fiddle gives a solution to your problem.

answered Sep 22, 2020 at 20:16

daniel

1,1623 gold badges16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

laso Over a year ago

YES!! thank you! I was having a hard time adding new values to the articles array. Not only you fixed my problem you also opened my eyes to "created()".

Liel Fridman · Accepted Answer · 2020-09-22 19:16:40Z

1

Make a boolean property for each article, then change the binding of disabled to that property.

answered Sep 22, 2020 at 19:16

Liel Fridman

1,23310 silver badges16 bronze badges

3 Comments

laso Over a year ago

So I would have to store the disabled property in my database? How can I do it without storing it to my database. Just a simple toggle on button click

Liel Fridman Over a year ago

You don't need to. You can add it in JS after you receive the initial one. You can also have another array with true/false by index. Whatever you prefer

laso Over a year ago

Thank you for you help

Collectives™ on Stack Overflow

VueJS - How to Enable/Disable a specific input in a v-for loop

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related