0

因此，我需要根据对外部端点的查询结果生成 x 数量的“选择”。

下面是一个 json 示例，它是我用来生成我的选择的数据。此示例仅包含“问题”数组中的一个“问题”。（此外，“答案”中的数组结构有点夸张，但这就是我必须使用的）

"questions": [{
    "question": [
    {
       "answers": [
        {
          "answer": [
            {
              "answer": "Answer 1",
              "id": 216,
              "questionID": 83,
              "selected": false,
              "sortOrder": 1
            },
            {
              "answer": "Answer 2",
              "id": 217,
              "questionID": 83,
              "selected": true,
              "sortOrder": 2
            },    
            ... plus x number of "answers" here..           
          ]
        }
       ],
       "question": "Question 1",
     }
    ]}
 ...]

所以，我像这样生成选择（我已经从不相关的样式中删除了示例）：

<v-layout row wrap v-for="question in questionnaire.questions[0].question" 
:key="question.id">  
      <span>{{question.question}}</span>

      <v-select
        item-text="answer"
        item-value="id"
        :items="question.answers[0].answer"
        ref="answer_selects"    
      ></v-select>

现在，回到我的问题。正如您在 json 中看到的，第二个“答案”有一个属性“已选择”，其值为“真”。这意味着我必须将此特定项目设置为“默认”选中。如何以良好的 vue 方式实现这一目标？

4

1 回答 1

1

如果您只想将其设置为默认值，您可以使用:value-Property 并将选择设置为 true 的答案数组中的第一个对象传递。

:value="question.answers[0].answer.find(answer -> answer.selected)"

请注意，使用该值时，该值不会绑定到所选内容，因此如果您选择不同的项目，则父组件中的数据将不会更新！如果您希望它自动更新，您应该考虑使用 v-model 和计算属性。

编辑： 好的，所以我已经更深入地研究了你的问题，我想我想出了一个很好的解决方案。

首先，我不太了解您在 v-select 组件中设置的属性，因为它们都没有在VueSelect Api中定义。在这个答案中，我使用那里定义的属性。另外，我不太确定如何解释您的数据结构，所以我将仅举一个示例，其中包含一组问题，其中包含一个 id、一个问题文本和一组答案。

为了将 v-model 与计算属性一起使用，您必须实现一个 getter，它将被调用以设置 v-select-component 数据和一个 setter，用于在 select-component 中选择不同的项目时更新数据。由于在您的情况下，您必须为问题数组中的每个元素拥有一个计算属性，因此您应该将问题对象的显示包装到它自己的组件中，并在循环中显示多个。

Vue.component('v-select', VueSelect.VueSelect);
Vue.component("question", {
  "template": "#questionTemplate",
  "props": {
    "question": Object
  },
  "computed": {
    "selectedId": {
      "get": function() {
        return this.question.answers.find(answer => answer.selected).id;
      },
      "set": function(id) {        
        //set selected flag on newly selected element
        this.question.answers.find(answer => answer.id === id).selected = true;
        //reset previous choice
        this.question.answers.find(answer => answer.selected && answer.id !== id).selected = false;
      }
    }
  }
});

new Vue({
  "el": "#app",
  "data": function() {
    return {
      "questions": [
        {
          "id": 83,
          "question": "QuestionText",
          "answers": [
            {
              "answer": "Answer 1",
              "id": 216,
              "questionID": 83,
              "selected": false,
              "sortOrder": 1
            },
            {
              "answer": "Answer 2",
              "id": 217,
              "questionID": 83,
              "selected": true,
              "sortOrder": 2
            }
          ]
        }
      ]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">

<div id="app">
  <question v-for="question in questions" :question="question" :key="question.id"></question>
</div>

<script type="text/x-template" id="questionTemplate">
  <div>
    <p>{{question.question}}</p>
    <v-select
      v-model="selectedId"
      :options="question.answers" 
      label="answer"
      :reduce="answer => answer.id"></v-select>
      
      <p>Selected AnswerId: {{selectedId}}</p>
  </div>
</script>

如果您希望能够选择多个值，VueSelect 组件将返回一个 ID 数组而不是一个 ID，因此您必须相应地调整计算的 getter 和 setter。

希望我能提供帮助，如果您需要任何进一步的帮助，请告诉我！

于 2019-09-13T20:21:59.347 回答