Флажок автоматического выбора Vue в соответствии с другим массивом

#json #vue.js #checkbox

#json #vue.js #флажок

Вопрос:

Итак, у меня есть 2 разных запроса api в моем приложении vue. Один из них — ответить на все вопросы.

[ { «id»: 20, «вопрос»: «Сигарета» }, { «id»: 2, «вопрос»: «Алкоголь»}, { «id»: 3, «вопрос»: «Диабет» }]

Во втором запросе возвращается то, что клиент проверил из формы по этим вопросам.

{ «сигарета»: «да», «алкоголь»: «да», «мобильный»: » 44111111111″}

и так далее…

В моем form.js файл, который я хочу видеть, чтобы флажок был установлен, если клиент установил этот флажок. В цикле for у меня есть это

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

Как я могу автоматически установить эти флажки. Заранее спасибо

1. Вероятно, вы не получите ответа, потому что никто не собирается писать код для вас

2. по крайней мере, идея будет действительно хорошей. Я вроде как застрял

3. мне сложно ответить, это не очень хорошо задано

4. пожалуйста, поделитесь своим полным кодом, чтобы нам было проще предоставить ответ

5. Весь мой код составляет более 1000 строк. Я думал, что объяснил достаточно, но все равно спасибо

Ответ №1:

Это сложнее, чем должно быть, потому что вам нужно что-то, чтобы связать ответ с вопросом. Вы хотели бы что-то одинаковое в обоих случаях, и сейчас у вас этого нет. Ключ ответов и текст вопроса почти совпадают, но один строчный, а другой нет. Было бы проще / надежнее, если бы вы могли, например, получить идентификатор вопроса в объекте ответа.

Учитывая вашу текущую структуру данных, вы могли бы сделать это:

 <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"
    }
  }
})

Скрипка: https://jsfiddle.net/thebluenile/1bheo648 /