javascript - 为 vuejs 中动态生成的 select 元素分配默认的 selected 值

Question

我在页面中动态生成了多个选择元素。我已经用过

v-model = "selected_option" 

用于获取所选选项的值。但是页面中的所有 select 元素都有不同的选项值，并且没有一个 select 元素具有任何共同的默认选项值。所有选择元素都需要将第一个选项元素作为默认选择值。但如果我写

selected_option = '' 

那么所有选择的元素默认显示为空白。 如果删除，我可以将第一个选项值作为默认选择值

v-model = "selected_option"

和

selected_option = '' 

但是我无法在 @change 方法中获取所选值。这是我的代码

<div v-if="row.answer_input_type === 'Dropdown'">
  <template v-for="answer in answers">
    <template v-if="answer.AnswerTypeID === row.answer_type_id">
      <select class="dropdown_cl" v-bind:disabled="row.is_enabled == 1 ? false : true" @change="selectChange(row.question_id)"  v-model="selected_option">
        <option v-for="option in answer.AnswerDescription" v-bind:value="option.AnswerMasterID"   >{{option.AnswerDescription}}</option>
      </select>
      <p v-for="option in answer.AnswerDescription">{{option.AnswerMasterID}}</p>
    </template>
  </template>
</div>

默认值已分配如下 -

el : '...'
data : {
         ...
         selected_option: '';
       },
methods: {
          selectChange: function(question_id) {
                           var self=this;
                           alert(question_id + " " + self.selected_option);
                        },
          ...
         },
....

我需要每个选择都将第一个选项作为默认选择值。我怎样才能做到这一点？谢谢

Answer 1

这是我在评论中解释的内容的一个简单示例。

<select v-for="answer in answers"
        v-model="answer.selectedOption">
  <option v-for="option in answer.options" 
          :value="option">
    {{option}}
  </option>
</select>

Example .

如果您采用这种方法，您可以管理每个单独选择的默认选项。您还将自动知道为每个答案选择的内容。