单击添加新时启用输入，单击创建按钮后禁用输入

Question

我有一个<input> 和两个<button>s。如果我单击Add new input，则会显示<input>。但是，我想在单击Create 按钮后禁用<input>。 <input> 已经在工作，但在单击 Create 按钮后它不会被禁用。

App.vue

<template>
  <div id="app">
    <button class="button is-orange has-text-white" @click="addRow">Add Input</button>
    <table>
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(input, index) in inputs">
          <td width="1%">{{++index}}</td>
          <td width="18%">
            <b-field>
              <input v-model="input.one" id="one" class="input one" type="text" placeholder>
            </b-field>
          </td>
          <td width="15%">
            <button class="button is-orange has-text-white" @click="inserts(inputs)">Create</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      searchorderid: null,
      inputs: [],
      data: {},
      loading: false
    };
  },
  methods: {
    addRow() {
      this.inputs.push({
        one: ""
      });
    },
    deleteRow(index) {
      this.inputs.splice(index, 1);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

我希望输出如下所示：

Create被点击后，前面的<input>应该被禁用。

demo

Answer 1

您可以将inserts() 更新为：

1. 接收input 迭代器项（而不是inputs，它已经可以通过this.inputs 访问）：

   <tr v-for="(input, index) in inputs">
     <!-- BEFORE -->
     <!-- <button @click="inserts(inputs)"> -->
   
     <button @click="inserts(input)">
       ...
     </button>
   </tr>
   

2. 向input 迭代器项添加一个布尔属性，指示是否应禁用相应的<input>：

   export default {
     methods: {
       // BEFORE:
       //inserts(inputs) {
   
       inserts(input) {
         this.$set(input, 'disabled', true)
       }
     }
   }
   

3. 将<input>的disabled prop绑定到上一步新添加的prop：

   <tr v-for="(input, index) in inputs">
     <input :disabled="input.disabled">
     ...
   </tr>