Vue学习遇到的坑(下拉选择框无法和传入数据对应)

下拉选择框无法和传入数据对应

这是我一开始的代码

不论我怎么v-model或者v-bind很多种方法,甚至让我怀疑element给的是不是正确的代码,我比对了好几遍,在确认无误后继续寻找原因,

因为是我自己写的后台接口,我一度怀疑是不是布尔值的原因传过来的时候是这样的"sMalfunction" = false这样的json所以我怀疑吧引号去掉就会好吧,然而…

最终问了下前端的大佬…

value前面应该是有个:我没加上

        <el-form-item label="是否故障"   prop="isMalfunction"  class="formItem">
          <el-select  v-model="form.isMalfunction"  clearable  placeholder="请选择"  :disabled="isLook">
            <el-option label="" value="false"></el-option>
            <el-option label="" value="true"></el-option>
          </el-select>
        </el-form-item>

修改后就好了,数据绑定上了

        <el-form-item label="是否故障"   prop="isMalfunction"  class="formItem">
          <el-select  v-model="form.isMalfunction"  clearable  placeholder="请选择"  :disabled="isLook">
            <el-option label="" :value="false"></el-option>
            <el-option label="" :value="true"></el-option>
          </el-select>
        </el-form-item>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,根据你的需求描述,我来为你提供一个 Vue3 + Element Plus + TypeScript 的数据字典下拉选择组件的示例代码,希望能对你有所帮助。 ```vue <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" /> </el-select> </template> <script lang="ts"> import { defineComponent } from 'vue' import { ElSelect, ElOption } from 'element-plus' import { getDictOptions, DictOption } from '@/api/dict' export default defineComponent({ name: 'DictSelect', components: { ElSelect, ElOption }, props: { dicCode: { type: String, required: true }, value: { type: String, default: '' } }, data() { return { options: [] as DictOption[] } }, watch: { dicCode: { immediate: true, handler(val: string) { this.loadOptions(val) } } }, methods: { async loadOptions(dicCode: string): Promise<void> { const result = await getDictOptions(dicCode) this.options = result.data } } }) </script> <style scoped> </style> ``` 在这个示例代码中,我们定义了一个名为 `DictSelect` 的组件,其中包含了一个 el-select 和若干个 el-option 组件,用于展示数据字典的选项。组件中,我们使用了 Element Plus 提供的 el-select 和 el-option 组件,以及 Vue3 中的 `defineComponent` 函数来定义组件。 在组件的 props 中,我们定义了一个必选的 `dicCode` 属性,用于指定数据字典的编码;以及一个可选的 `value` 属性,用于指定选中的。在组件的 data 中,我们定义了一个 `options` 数组,用于存储数据字典的选项。 组件中的 `loadOptions` 方法用于加载数据字典的选项,它接受一个 `dicCode` 参数,用于指定数据字典的编码。在这个方法中,我们调用了一个名为 `getDictOptions` 的 API 接口,该接口用于获取指定数据字典的选项。在接口返回结果后,我们将选项数组保存到组件的 data 中。 最后,在组件中,我们使用了一个 watch 来监听 `dicCode` 属性的变化,当 `dicCode` 的发生变化时,我们自动调用 `loadOptions` 方法来加载数据字典的选项。在 el-select 中,我们使用了 `v-model` 来绑定选中的。当用户选择了一个选项后,组件会自动将选中的存储到组件的 data 中,并触发一个 `input` 事件来通知父组件更新绑定的。 使用这个组件时,你可以在父组件中引入它,并传入一个 `dicCode` 来展示对应数据字典,例如: ```vue <template> <DictSelect v-model="selectedValue" dicCode="gender" /> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' import DictSelect from '@/components/DictSelect.vue' export default defineComponent({ name: 'Example', components: { DictSelect }, setup() { const selectedValue = ref('') // 选中的 return { selectedValue } } }) </script> <style scoped> </style> ``` 在这个示例代码中,我们在父组件中引入了 `DictSelect` 组件,并传入了一个 `dicCode` 为 `gender`。我们还使用了 `v-model` 来双向绑定选中的,并将其保存在 `selectedValue` 变量中。当用户选择了一个选项后,`selectedValue` 的会自动更新,当再次打开页面时,`selectedValue` 的会自动回显。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值