关于vue几个特殊的绑定数据的情况

1.问题描述:

从数据库中读取数据,并将数据绑定到redio和input-number上.

模板的代码:

<a-radio-group v-model="admin.gender">
    <a-radio :value='1'>男</a-radio>
    <a-radio :value='0'>女</a-radio>
</a-radio-group>

<a-input-number v-model="admin.tel" placeholder="请输入电话号码"></a-input-number>

js的代码: 

const admin = reactive({
    gender:1,
    tel:undefined,
})

这里需要注意到是admin中定义的gender是数字类型,那么在radio-group中的单选按钮的value也需要时数字类型,那么才能实现默认被选中的情况.

所以这里需要使用<a-radio :value='1'>男</a-radio>,注意是:value不是value,:value会进行数字的转换.

另外这里使用了数字文本框,input-number,也就是说只能接收数字的输入,如果从数据库中取出来的电话号码是字符串,那么这里需要进行类型转换后才能显示在文本框.

例如:

admin.tel = parseFloat(res.data.data.tel);

如果取出来的是不是数字,那么不能显示在数字文本框中.

另外绑定下拉列表时:

如果v-model="record.parentId"对应编号为0时,在option中需要使用:value="0",而不是value="0",不然不能正确的识别.

<template #parentId="{ record,rowIndex }">
        <a-select v-model="record.parentId">
          <a-option :value="0">一级菜单</a-option>
          <a-option v-for="item in parentCategory" :key="item.id" :value="item.id">
            {{ item.categoryName }}
            </a-option>
        </a-select>
</template>