Vue根据另一个数组自动选择复选框

Question

所以我的 vue 应用程序中有 2 个不同的 api 请求。其中之一是提出所有问题。

[ {“id”：20，“问题”：“香烟”}，{“id”：2，“问题”： "酒精" }, { "id": 3, "question": "糖尿病" }]

在第二个请求中返回客户从表单中检查的关于这些问题的内容。

{“香烟”：“是”，“酒精”：“是”，“手机”：“+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>

如何自动选择此复选框。提前致谢

Answer 1

这比实际需要的要困难，因为您需要一些东西来将问题的答案联系起来。你想要的东西在这两种情况下都是一样的，而你现在还没有。答案键和问题文本几乎匹配，但一个是小写的，另一个不是。例如，如果您可以在答案对象中获取问题 ID，将会更容易/更可靠。

鉴于您当前的数据结构，您可以这样做：

<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/