解决elementUi el-select 响应式不见效的题目

情况一,字段范例不匹配

考虑option的value值的字段范例是否和api返回的字段范例一致，如果一个为字符串一个为数字范例是无法匹配上的

1. <template>
2. <div>
3.     <el-select  
4.       v-model="value"
5.       size="large"
6.       style="width: 240px">
7.       <el-option
8.         v-for="item in options"
9.         :key="item.value"
10.         :label="item.label"
11.         :value="item.value"
12.       />
13.     </el-select >
14. </div>
15. </template>
16. <script setup>
17. import { ref, reactive, onMounted } from 'vue'
18. import axios from 'axios';
19. const options = [
20.   {
21.     value: 'Option1',
22.     label: '1',
23.   },
24.   {
25.     value: 'Option2',
26.     label: '2',
27.   },
28. ]
29. const value = ref("")
30. const apiFun = async()=>{
31.     //接口返回的data结构
32.     /*
33.     {
34.         selectValue:1
35.     }
36.     */
37.     const data = await axios.get("****url****")
38.     //解决方法,转成同样类型
39.     value.value =data.selectValue.toString()
40. }
41. </script>

复制代码

情况二，响应式失效

字段范例能对上，但是响应式失效了，这个时间要使用key逼迫刷新组件

1. <template>
2. <div>
3.     <el-select  
4.       v-model="value"
5.       size="large"
6.       :key="index"
7.       style="width: 240px">
8.       <el-option
9.         v-for="item in options"
10.         :key="item.value"
11.         :label="item.label"
12.         :value="item.value"
13.       />
14.     </el-select >
15. </div>
16. </template>
17. <script setup>
18. import { ref, reactive, onMounted } from 'vue'
19. import axios from 'axios';
20. const options = [
21.   {
22.     value: 'Option1',
23.     label: '1',
24.   },
25.   {
26.     value: 'Option2',
27.     label: '2',
28.   },
29. ]
30. const value = ref("")
31. const index = ref(0)
32. const apiFun = async()=>{
33.     //接口返回的data结构
34.     /*
35.     {
36.         selectValue:"2"
37.     }
38.     */
39.     const data = await axios.get("****url****")
40.     value.value =data.selectValue
41.     //解决方法,强制刷新组件
42.     index +=1
43. }
44. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。