Vue3 - Managing the Enabling and Disabling of Text Input and Checkbox Based on Input Number

Question

Vue3 - Managing the Enabling and Disabling of 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>

There will be a total of 10 input rows generated using v-for loop.

My goal is to make Row1-input2 and Row1-checkbox enabled when the user enters a number in Row1-input1. This should not impact the other 9 rows. Additionally, clicking on the delete section should clear the entire row value.

I am uncertain about the best approach in Vue.js to accomplish this task. Should I create 10 separate data variables and store the value on keyup events, then use them to bind with :disabled? Or are there any Vue.js methods that could simplify this process?

javascript vue.js vuejs3 nuxt3.js

Answer 1

Answer №1

In my opinion, the most effective strategy would involve developing a component for a single line, where all the necessary logic for managing a single instance can be consolidated. Subsequently, multiple instances of this component can be created as needed.

Below is a sample implementation for your specific task, assuming I have correctly grasped the requirements:

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

const defaultRowValue = {
  input1: '',
  input2: '',
  checkbox: false
}

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 = { ...defaultRowValue
      };
    }

    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() {

    // Generate sample data
    for (let i = 0; i < 10; i++) {
      this.rows.push({ ...defaultRowValue
      })
    }
  }
})

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>

Answer 2

In my opinion, the most effective strategy would involve developing a component for a single line, where all the necessary logic for managing a single instance can be consolidated. Subsequently, multiple instances of this component can be created as needed.

Below is a sample implementation for your specific task, assuming I have correctly grasped the requirements:

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

const defaultRowValue = {
  input1: '',
  input2: '',
  checkbox: false
}

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 = { ...defaultRowValue
      };
    }

    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() {

    // Generate sample data
    for (let i = 0; i < 10; i++) {
      this.rows.push({ ...defaultRowValue
      })
    }
  }
})

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>

Answer 3

Answer №2

You must identify the individuality within your inputs.

As mentioned earlier, you can create a :value or v-model for each input.

Then combine each string with an index to generate a unique input.

When doing this, ensure that the v-model of the input is returned with an array type and not a string type.

This is necessary because the concatenation requires a string and an index.

Here is an example of how to use v-model:

For input 1

v-model="row.input[index+'-input1']"

For input 2

v-model="row.input[index+'-input2']"

Now, you will have access to your row inputs.

You can then utilize them with the disabled and delete functions.

Demo

Answer 4

You must identify the individuality within your inputs.

As mentioned earlier, you can create a :value or v-model for each input.

Then combine each string with an index to generate a unique input.

When doing this, ensure that the v-model of the input is returned with an array type and not a string type.

This is necessary because the concatenation requires a string and an index.

Here is an example of how to use v-model:

For input 1

v-model="row.input[index+'-input1']"

For input 2

v-model="row.input[index+'-input2']"

Now, you will have access to your row inputs.

You can then utilize them with the disabled and delete functions.

Demo

Vue3 - Managing the Enabling and Disabling of Text Input and Checkbox Based on Input Number

Answer №1

Answer №2

Similar questions

The template for a Vue dynamic component refuses to function properly with a promise

Tips for showcasing images consistently in a V-Card with uniform sizes

Vue Cli 3: customization of output directory paths

Best practice for incorporating Bootstrap into Webpack

Combining several meshes in ThreeJS while maintaining distinct materials

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

Permitting various valid responses for questions in a multiple-choice test | Utilizing Angular.js and JSON

Modifying dat.gui to reflect changes made to the selected object

Troubleshooting: Issue with displaying PHP data on an AngularJS table using JSON through jQuery AJAX

There seems to be an issue with the way Meteor and React are displaying data

Personalized Angular dropdown menu

Exploring an array to retrieve a specific value

What is the best way to iterate through an ID using jQuery?

What is the best way to implement page navigation within Nuxt?

Implementing the insertion of a <div> element within an input field using jQuery

Cannot retrieve the <li> element from the array

Focusing in on a PARTICULAR SECTION of the picture

The method mongoose.connect() is not defined

What could possibly be causing my code to execute multiple times?

Is the XPath in Selenium executed against the Document Object Model (DOM) or the HTML file