Question

因此，我需要根据查询到外部端点的结果来生成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中看到的那样，第二个“答案”具有值为“ true”的属性“ selected”。这意味着我必须将此特定项目设置为“默认”选中。如何以良好的方式实现这一目标？

Answer 1

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

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

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

编辑： 好的，所以我对您的问题进行了更深入的研究，我想出了一个很好的解决方案。

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

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

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。

希望我能帮助您，如果您需要其他帮助，请告诉我！

如何使用vue.js在select中设置默认选择值？

1 个答案: