原生select在移动端双向绑定无效？

Question

在h5正常双向绑定数据，但是移动端的时候v-model就无效了，初始化不能正常选择，改变方法可以执行，但是selectedOption不变，这是什么原因如何解决？

<template>
  <select class="select" name="select" v-model="selectedOption" @change="updateValue">
    <option
      v-for="item in props.options"
      :value="item.value"
      :key="item.value"
    >
      {{ item.text }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

type Options = {
    text: string;
    value: string | number;
    selected?: boolean;
    [key: string]: any;
  }

type Props = {
  modelValue?: string | number;
  options?: Array<Options>;
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  options: null,
});
const emit = defineEmits(['update:modelValue']);

const selectedOption = ref(props.modelValue);

const updateValue = () => {
  emit('update:modelValue', selectedOption.value);
};
</script>

Answer 1

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/select

原生的select本身就没有value属性，没法使用v-model。这里你应该在v-for循环的option元素上，按照条件设置selected属性。

Answer 2

可以尝试在列表中第一项添加一个 空值的禁用选项，示例如下：

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

表单输入绑定 - 选择器

如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。