Question 252796 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vue3 – How to enable/disable text input and checkbox based on input number

<div class="container-body" v-for="index in 10" :key="index">
    <div class="container-content"></div> 
    <div class="container-content">
        <input :id="'Row'+index+'-input1'" type="text">
    </div> 
    <div class="container-content">
        <input :id="'Row'+index+'-input2'" type="text" class="disabled">
    </div> 
    <div class="container-content">
        <div class="custom-control custom-checkbox">
            <input :id="'Row'+index+'checkbox'" class="form-check-input" type="checkbox" disabled>
        </div>
    </div> 
    <div class="container-content delete">
        <img/>
    </div>
</div>

I will have 10 input rows using v-for.

I need to achieve:
When user enter number on Row1-input1, Row1-input2 and Row1-checkbox will be enabled. The input enabling should not affect the other 9 rows. Also, when I click on the delete div, it should clear the whole row value.

I’m not sure how to achieve this in Vue. Should I create 10 data variables, and save the value onkeyup, and use it bind with :disabled ? Or are there any Vue methods that can achieve this ?

Tags:

2

Answers


  1. 0

    here is an approach:

    <template>
  <div>
    <div class="container-body" v-for="(row, index) in rows" :key="index">
      <div class="container-content"></div>
      <div class="container-content">
        <input :id="'Row'+index+'-input1'" type="text" @input="enableRow(index)" v-model="row.input1">
      </div>
      <div class="container-content">
        <input :id="'Row'+index+'-input2'" type="text" class="disabled" :disabled="!row.input1">
      </div>
      <div class="container-content">
        <div class="custom-control custom-checkbox">
          <input :id="'Row'+index+'checkbox'" class="form-check-input" type="checkbox" :disabled="!row.input1" v-model="row.checkbox">
        </div>
      </div>
      <div class="container-content delete" @click="clearRow(index)">
        <img />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rows: Array(10).fill({
        input1: '',
        input2: '',
        checkbox: false
      })
    };
  },
  methods: {
    enableRow(index) {
      if (this.rows[index].input1) {
        this.rows[index].input2 = '';
        this.rows[index].checkbox = false;
      }
    },
    clearRow(index) {
      this.rows[index].input1 = '';
      this.rows[index].input2 = '';
      this.rows[index].checkbox = false;
    }
  }
};
</script>
    Login or Signup to reply.
  2. 0

    I think the best approach would be to create a component for one line, where you can put all the logic for working with one instance. And then create the required number of such components.

    Here is an example implementation for your task, if I understood everything correctly:

    const {
  computed,
  createApp,
  ref,
} = Vue;

const customRow = {
  props: ['index', 'modelValue'],
  emits: ['update:modelValue'],
  setup(props, {
    emit
  }) {

    const model = computed({
      get: () => props.modelValue,
      set: (val) => {
        emit('update:modelValue', val)
      }
    })

    const disable = computed(() => model.value.input1);

    const clearRow = () => {
      model.value.input1 = '';
      model.value.input2 = '';
      model.value.checkbox = false;
    }

    return {
      model,
      clearRow,
      disable,
    }
  },
  template: `
  <div class="container-body">
      <div class="container-content"></div>
      <div class="container-content">
        <input :id="'Row'+index+'-model.input1'" type="text" v-model="model.input1">
      </div>
      <div class="container-content">
        <input :id="'Row'+index+'-model.input2'" type="text" v-model="model.input2" class="disabled" :disabled="!disable">
      </div>
      <div class="container-content">
        <div class="custom-control custom-checkbox">
          <input :id="'Row'+index+'checkbox'" class="form-check-input" type="checkbox" :disabled="!disable" v-model="model.checkbox">
        </div>
      </div>
      <div class="container-content delete">
        <button @click="clearRow">delete</button>
      </div>
    </div>
  `
}

const app = createApp({
  data() {
    return {
      rows: []
    };
  },
  mounted() {

    // Create test data
    for (let i = 0; i < 10; i++) {
      this.rows.push({
        input1: '',
        input2: '',
        checkbox: false
      })
    }
  }
})

app.component("custom-row", customRow);

app.mount('#app');
    #app {
  display: flex;
}
    <script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <div>
    <custom-row v-for="(_, key) in rows" :key="key" :index="key" v-model="rows[key]"></custom-row>
  </div>
  <pre>
    {{rows}}
    </pre>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search