Enable the field when the checkbox is selected using VueJS

Question

Enable the field when the checkbox is selected using VueJS

Hello there, I'm encountering an issue with my app. I am attempting to unlock a field if the checkbox next to it is selected and then save this value to an array. However, when I click on the checkbox, the field does not unlock. Below is the code snippet:

  <ul>
    <li v-for="oneFragrance in fragrance" v-bind:key="oneFragrance.id">
      <input type="checkbox" :value="oneFragrance.nameOfFragrance" :id="oneFragrance.id" v-model="checkedComponents"> {{oneFragrance.nameOfFragrance}}
      <input type="text"  :disabled="checkedComponents" v-model="valuesOfComponents">
    </li>
  </ul>

javascript vue.js

Answer 1

Answer №1

<ul>
<li v-for="(onePerfume , index) in perfumeList" v-bind:key="onePerfume.id">
  <input type="checkbox" :value="onePerfume.perfumeName" :id="onePerfume.id" v-model="selectedPerfumes[index]"> {{onePerfume.perfumeName}}
  <input type="text"  :disabled="selectedPerfumes[index]" v-model="componentsValues">
</li>

included in your dataset

var application = new Vue({
  el: '#application',
  data: {
    selectedPerfumes: []
  }
})

Answer 2

<ul>
<li v-for="(onePerfume , index) in perfumeList" v-bind:key="onePerfume.id">
  <input type="checkbox" :value="onePerfume.perfumeName" :id="onePerfume.id" v-model="selectedPerfumes[index]"> {{onePerfume.perfumeName}}
  <input type="text"  :disabled="selectedPerfumes[index]" v-model="componentsValues">
</li>

included in your dataset

var application = new Vue({
  el: '#application',
  data: {
    selectedPerfumes: []
  }
})

Answer 3

Answer №2

One possible solution could be to update the v-model of the initial input with a :click event

 <ul>
<li v-for="oneFragrance in fragrance" v-bind:key="oneFragrance.id">
  <input type="checkbox" :value="oneFragrance.nameOfFragrance" :id="oneFragrance.id" :click="checkedComponents = !checkedComponents"> {{oneFragrance.nameOfFragrance}}
  <input type="text"  :disabled="checkedComponents" v-model="valuesOfComponents">
</li>

This adjustment should ensure that the value consistently updates and the text input becomes enabled

Answer 4

One possible solution could be to update the v-model of the initial input with a :click event

 <ul>
<li v-for="oneFragrance in fragrance" v-bind:key="oneFragrance.id">
  <input type="checkbox" :value="oneFragrance.nameOfFragrance" :id="oneFragrance.id" :click="checkedComponents = !checkedComponents"> {{oneFragrance.nameOfFragrance}}
  <input type="text"  :disabled="checkedComponents" v-model="valuesOfComponents">
</li>

This adjustment should ensure that the value consistently updates and the text input becomes enabled

Answer 5

Answer №3

To ensure the checkbox saves a value in an array, consider implementing the following code snippet:

<ul>
    <li v-for="oneFragrance in fragrance" v-bind:key="oneFragrance.id">
    <input type="checkbox" :value="oneFragrance.nameOfFragrance" :id="oneFragrance.id" v-model="checkedComponents"> {{oneFragrance.nameOfFragrance}}
    <input type="text" :disabled="!checkedComponents.includes(oneFragrance.nameOfFragrance)" v-model="valuesOfComponents">
    </li>
</ul>

Remember to define checkedComponents: [] within your data() function

Answer 6

To ensure the checkbox saves a value in an array, consider implementing the following code snippet:

<ul>
    <li v-for="oneFragrance in fragrance" v-bind:key="oneFragrance.id">
    <input type="checkbox" :value="oneFragrance.nameOfFragrance" :id="oneFragrance.id" v-model="checkedComponents"> {{oneFragrance.nameOfFragrance}}
    <input type="text" :disabled="!checkedComponents.includes(oneFragrance.nameOfFragrance)" v-model="valuesOfComponents">
    </li>
</ul>

Remember to define checkedComponents: [] within your data() function

Enable the field when the checkbox is selected using VueJS

Answer №1

Answer №2

Answer №3

Similar questions

The perplexing results received when using the npm outdated command

Using a function as a variable within jQuery's .click() method

Ways to center vertically aligned buttons within cards in a React application with Material-UI

The function RegisterClientScriptInclude seems to be malfunctioning inexplicably

Tips for showcasing a drop-down menu using Jquery

Restrict the quantity of user responses with JavaScript

Ids that are dynamically generated in a unique manner

Modifying an element within a nested array

Struggling to integrate vue js into Laravel

Error Encountered: POST method not supported in ajax request using djangoIs this a

At the pinnacle of the page while operating inside an iFrame - crossing domains

Issue with dynamically passing select values to pop-up link in Firefox

When a form contains a ViewChild element, changes to the ViewChild element do not automatically mark the

When examining an element in an Angular application using Chrome Dev Tools, why do I not observe raw HTML code?

Using v-model with checkboxes in vue.js: A Step-by-Step Guide

jQuery does not change the scroll position of elements

Is it more efficient to pass session variables through an ajax function, or should I access them directly within the script?

JavaScript analyzing a file's content one line at a time

Tips on showcasing a JSON object containing two arrays in HTML using a pair of for loops

The data in my AngularJS model will only refresh when the button is clicked twice