时间戳

首页 > 解决方案 > 禁用/启用循环VueJS中每个项目的输入

vue.js - 禁用/启用循环VueJS中每个项目的输入

问题描述

我尝试启用/禁用循环中的每个输入。问题是我的方法在刷新后就起作用了。在我修改代码并保存后，输入就可以了。

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

标签： vue.jsvuejs2

解决方案

我没有完全理解你的问题。我推断您可能想要启用或禁用您从提供的数据创建的文本字段。如果这仍然不是您的意思，请通过粘贴更多源代码来纠正您的问题，并更详细地解释您的问题。

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>

推荐阅读