android - 原生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

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

<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 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。

Answer 2

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

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