Vue auto select checkbox according to another array

Question

So i have 2 different api request in my vue application. One of them is bringing the all questions.

[ { "id": 20, "question": "Cigarette" }, { "id": 2, "question": "Alcohol" }, { "id": 3, "question": "Diabetes" }]

In second request is returning what client has checked from the form about these questions.

{ "cigarette": "yes", "alcohol": "yes", "mobile": "+44111111111"}

and so on...

In my form.js file i want to see the checkbox has checked if client has selected that checkbox. In for loop i have this

<li v-for="(ask, askey) in patientQuestions" :key="askey">
    <b-form-checkbox v-model="ask.value">{{ ask.question }}</b-form-checkbox>
</li>

How can i auto select this checkboxes. Thanks in advance

Probably you will not get an answer because no one is going to write code for you — nitishk72
– nitishk72, Commented Dec 6, 2020 at 16:09
please share your whole code to make it easier for us to provide the answer — Boussadjra Brahim
– Boussadjra Brahim, Commented Dec 6, 2020 at 16:17
My whole code is over 1000 line. I thought I explained enough but thanks anyway — Atif Şeşu
– Atif Şeşu, Commented Dec 6, 2020 at 16:25

Brother Woodrow · Accepted Answer · 2020-12-06 16:27:59Z

1

It's more difficult than it needs to be because you need something to relate the answer to the question. You'd want something that's the same in both cases and you don't really have that right now. The answers key and question text almost match, but one is lowercase and the other one is not. It would be easier/more reliable if you could for example get the question ID in the answer object.

Given your current data structure, you could do this:

<div id="app">
  <ul>
    <li v-for="(pq, index) in patientQuestions" :key="pq.id">
      <b-form-checkbox value="yes" v-model="answers[pq.question.toLowerCase()]">{{ pq.question }}</b-form-checkbox>
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    patientQuestions: [{
        "id": 20,
        "question": "Cigarette"
      },
      {
        "id": 2,
        "question": "Alcohol"
      },
      {
        "id": 3,
        "question": "Diabetes"
      }
    ],
    answers: {
      "cigarette": "yes",
      "alcohol": "yes",
      "mobile": "+44111111111"
    }
  }
})

Fiddle: https://jsfiddle.net/thebluenile/1bheo648/

answered Dec 6, 2020 at 16:27

Brother Woodrow

6,3923 gold badges22 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atif Şeşu Over a year ago

okay i got the point i will update the form input names according the other names and i will try your code. Thanks

Collectives™ on Stack Overflow

Vue auto select checkbox according to another array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related