Disable/Enable input for each item from a loop VueJS

Question

I try to enable/disable each input from a loop. The problem is that my method it works just after refresh. After I modify something in code and save, then the input works.

    <tr v-for="(item, index) in customer_names" :key="item.id">
        <td>
            <input :disabled="!item.disabled"
                v-model="item.name"
                type="text" 
        </td>
    </tr>

    <div class="edit_mode"
        :class="{'display-none':!item.disabled}">
        <i class="fa fa-save" @click="disableInput(index)" aria-hidden="true"></i>
    </div>
    <div class="edit_mode"
        :class="{'display-none':item.disabled}">
        <i class="fa fa-edit" @click="enableInput(index)" aria-hidden="true"></i>
    </div>

    props:['customer_names'],
    data(){
        return{
            disabled: [],
        }
    }
    enableInput(index){
        console.log('enableInput',this.customer_names[index].disabled);
        this.customer_names[index].disabled = false;
    },
    disableInput(index){
        console.log('disabeInput',this.customer_names[index].disabled);
        this.customer_names[index].disabled = true;
    }

Are item and index accessible on those two divs with class edit_mode? I mean, you defined them as v-for variables in the tr. — mrmowji
– mrmowji, Commented Dec 10, 2019 at 14:03
Yes, are accessible. My method works just after reflesh, I take a look now on trigger update methods. — Beusebiu
– Beusebiu, Commented Dec 10, 2019 at 14:06
Update on my earlier comment - as @mrmowji said, this shouldn't work but it works, I believe, because you don't have closing tag on input element. Also, "it works after refresh" means you have some AJAX call that stores the values? — Vucko
– Vucko, Commented Dec 10, 2019 at 14:20
@Beusebiu Would you please provide an HTML page which represent your issue? That way anyone can test your code easier. Github, JSFiddle, and other online services are fine. — mrmowji
– mrmowji, Commented Dec 10, 2019 at 14:20
@Beusebiu, it seems that you excluded code from your vue component which makes it hard to understand but I would say that when I experience this issue its because the data had not yet been received so maybe try doing a v-if="customer_names" on your v-for="(item, index) in customer_names" — TJ Weems
– TJ Weems, Commented Dec 10, 2019 at 14:31

Gander · Accepted Answer · 2019-12-10 21:51:29Z

I didn't fully understand your problem. I deduced that you might want to enable or disable the text fields that you create from the data provided. If this is still not what you meant, correct your question by pasting more source code, and explain your problem in more detail.

Vue.component("custom", {
  template: "#custom-template",
  props: ["customer_names"],
  methods: {
    enableInput(item) {
      item.disabled = false;
    },
    disableInput(item) {
      item.disabled = true;
    },
    toggleInput(item) {
      item.disabled = !item.disabled;
    }
  }
});

new Vue({
  data() {
    return {
      items: [
        { name: "fus", disabled: false },
        { name: "ro", disabled: false },
        { name: "dah", disabled: true }
      ]
    };
  }
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <custom :customer_names="items" />
</div>

<script type="text/x-template" id="custom-template">
  <table cellpadding=5>
    <tr>
      <th>Input</th>
      <th>Version 1</th>
      <th>Version 2</th>
    </tr>
    <tr v-for="item in customer_names" :key="item.id">
      <td>
        <input :disabled="item.disabled" v-model="item.name" type="text" />
      </td>
      <td>
        <button @click="item.disabled = false">E</button>
        <button @click="item.disabled = true">D</button>
        <button @click="item.disabled = !item.disabled">T</button>
      </td>
      <td>
        <button @click="enableInput(item)">E</button>
        <button @click="disableInput(item)">D</button>
        <button @click="toggleInput(item)">T</button>
      </td>
    </tr>
  </table>
</script>

Collectives™ on Stack Overflow

Disable/Enable input for each item from a loop VueJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related