如何使用vue.js在select中設置默認選擇值？

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-component中選擇了另一個項目時，將調用該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。

希望我能幫助您，如果您需要其他幫助，請告訴我！