Element UI 下拉选择框 v-model 绑定数据问题解决方法 - Vue.js

<template>
  <div>
    <select v-model="selectedOption">
      <option v-for="option in options" :value="option.value">{{ option.label }}</option>
    </select>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedOption: '', // 用于保存选中的选项值
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' }
      ]
    };
  }
};
</script>
<p>在上述示例中，<code>selectedOption</code>属性用于保存选中的选项值，通过<code>v-model</code>指令将其与下拉选择框绑定。每个选项通过<code>v-for</code>指令动态生成，其中<code>option.value</code>表示选项的值，<code>option.label</code>表示选项的显示文本。</p>
<p>当用户选择一个选项时，<code>selectedOption</code>的值会自动更新，可以在页面中显示当前选中的选项。</p>