Question

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

v-model = "selected_option"

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

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

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

为vuejs中动态生成的select元素分配默认选定值

1 个答案: