Enable the input when click add new and Disable the input after click the create button

Question

I have an <input> and two <button> s. If I click Add new input , the <input> shows. However, I want to make the <input> disabled after the Create button is clicked. The <input> is working already, but it doesn't get disabled after clicking the Create button.

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>

I want the output to look like this:

After Create is clicked, the preceding <input> should be disabled.

demo

Answer 1

You could update inserts() to:

1. Receive the input iterator item (instead of inputs , which is already accessible via this.inputs ):

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

2. Add a Boolean prop to the input iterator item that indicates whether the corresponding <input> should be disabled:

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

3. Bind <input> 's disabled prop to the newly added prop from the previous step:

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