vue auto select 复选框根据另一个数组

Question

所以我的 vue 应用程序中有 2 个不同的 api 请求。其中一位带来了所有问题。

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

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

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

等等...

在我的 form.js 文件中，如果客户端 select 选中了该复选框，我想查看该复选框是否已选中。在for循环中我有这个

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

我如何自动select这个复选框。提前致谢

Answer 1

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

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

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

vue auto select 复选框根据另一个数组

Vue auto select checkbox according to another array

checkbox

json

vue.js