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

Question

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

下面是 json 的示例，这是我用来生成选择的数据。这个例子在一个 "questions" 的数组中只包含一个 "question"。（此外，"answers" 中的数组构造有点夸张，但这就是我必须处理的）

"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 中看到的，第二个 "answer" 有一个属性 "selected"，其值为 "true"。这意味着我必须将此特定项目设置为选中 "by default"。我如何以良好的 vue 方式实现这一目标？

Answer 1

如果您只想将其设置为默认值，您可以使用 :value-属性并传递答案数组中具有 select 的第一个对象编辑设置为真。

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

请注意，当使用该值时，该值未绑定到 selected 的内容，因此如果您 select 一个不同的项目，父组件中的数据将不会更新！如果你想让它自动更新，你应该考虑使用 v-model 和 computed-properties。

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

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

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

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>

如果你希望能够 select 多个值，VueSelect 组件将 return 一组 ID 而不是一个 ID，因此你必须调整计算的 getter 和 setter 相应地。

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

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

How to set default selected value in select with vue.js?

select

default-selected

vue.js