vue表单的下拉选项怎么实现
<template>
<v-form v-model="valid" ref="GiftForm">
<v-text-field
label="礼物名称"
v-model="gift.giftName"
:rules="[v => !!v || '礼物名称不能为空']"
:counter="30"
required
/>
<v-text-field
label="描述"
v-model="gift.description"
required
/>
<v-text-field
label="价格"
v-model="gift.price"
required
/>
<div>
<div>
<v-select
:items="giftdiamonds"
label="是否钻石礼物"
v-model="isDiamond"
item-text="label"
item-value="value"
required
></v-select>
</div>
<div>
<v-select
:items="draws"
label="是否抽奖礼物"
v-model="giftisDraw"
item-text="label"
item-value="value"
required
></v-select>
</div>
<v-text-field
label="礼物概率"
v-model="gift.chance"
required
/>
<v-layout class="my-4">
<v-btn @click="submit" color="primary">提交</v-btn>
<v-btn @click="clear" color="warning">重置</v-btn>
</v-layout>
</v-form>
</template>
<script>
import config from '@/config';
const options = [
{
title: 'John',
subtitle: 'Engineering',
},
]
export default {
name: "gift-form",
props: {
oldGift: Object,
isEdit: {
type: Boolean,
default: false
},
show: {
type: Boolean,
default: true
}
},
data() {
return {
baseUrl: config.api,
valid:false,
gift: {
giftName: "",
description: "",
price: 0,
state: 0,
isDiamond: 0,
isDraw: 0,
chance: 0,
},
},
watch: {
oldGift:{
deep:true,
immediate:true,
handler(val){
this.gift = Object.deepCopy(val,this.gift)
}
}
},
methods: {
itemProps (item) {
return {
title: item.label,
subtitle: item.value,
}
},
submit() {
// 表单校验
if (this.$refs.GiftForm.validate()) {
this.$http({
method: 'post',
url: '/playGift/save',
data: this.gift
}).then(() => {
// 关闭窗口
this.$message.success("保存成功!");
this.closeWindow();
}).catch(() => {
this.$message.error("保存失败!");
});
}
},
clear() {
// 重置表单
this.$refs.giftForm.reset();
},
closeWindow(){
this.$emit("close");
location.reload();
},
acceptClick: function() {
if($("#state option:selected").text()=="请选择"){
$("#state").focus();
return false;
}
}
}
}
</script>
<style scoped>
</style>
下拉选项状态:上架和下架如何展示
问:效果如上图,具体代码如何实现