Checkbox checked on load and input box filled when a value present

user_15034865 0
Viewed 272

I have created a sandbox::

https://codesandbox.io/s/sweet-agnesi-qbf7g?file=/src/components/HelloWorld.vue

So my basic query is let say I have an array of object present as:

  let sampleArrayOfObject = [{
    Item: "ACC",
    Price: 12,
  },
  {
    Item: "BCC",
    Price: 50,
  },
  {
    Item: "ECC",
    Price: 21,
  }]

I have input field of type checkbox and text,

in checkbox let say I have ACC, BCC, CCC, DCC, ECC.

Let's say when sampleArrayOfObject matches with the checkbox field, ACC,BCC,CCC,DCC,ECC all the matching value present in sampleArrayOfObject should be checked and input field of type should have Price as value.

When checkbox is clicked, input field of type text should be visible where we can input the value.

So we should be able to remove the present value or change the price value and all those values should be store in newItem variable (detail on this variable present in codesandbox) on click of submit.

I tried but I am stuck, please let me know if anyone needs any further information or need any further clearance.

vuejs2 vue.js checkbox
1 Answers

If I understand your question correctly you want three things:

  1. Add a price by checking a checkbox and filling the value into an input
  2. Check the checkbox and show the value if the price is already set
  3. Return all items which have a set price onSubmit

In your sandbox I added a "hasPrice" attribute to your object because you may not use a string or number value as a v-model for a checkbox. And in your onSubmit I only return the items which have the hasPrice boolean set to true.

https://codesandbox.io/s/nostalgic-tree-4gnww?file=/src/components/HelloWorld.vue

user_38164120
Related