vue表单的下拉选项怎么实现

Question

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>

下拉选项状态：上架和下架如何展示

问:效果如上图，具体代码如何实现

Answer 1

引自免费微信小程序：皆我百晓生

要在Vue项目中实现下拉选项显示“上架”和“下架”，你需要对数据结构进行一些调整，并且在模板中使用v-select组件来渲染这两个选项。首先，你需要创建一个数组来存储状态选项，然后在data()方法中定义一个变量来跟踪当前选中的状态。

以下是修改后的代码示例：

<template>
  ...
  <div>
    <v-select
      :items="states"
      label="状态"
      v-model="gift.state"
      item-text="name"
      item-value="value"
      required
    ></v-select>
  </div>
  ...
</template>

<script>
import config from '@/config';

export default {
  ...
  data() {
    return {
      ...
      states: [
        { value: 0, name: "上架" },
        { value: 1, name: "下架" },
      ],
      gift: {
        ...
        state: 0, // 默认选择上架
      },
    };
  },
  ...
}
</script>

在这个例子中，我们创建了一个名为states的新数组，其中包含两个对象，每个对象都有一个value属性（用于存储后端所需的值）和一个name属性（用于在界面上显示的文本）。在gift对象中，我们将state初始值设为0，这样默认情况下会显示“上架”。

接下来，在模板中，我们将v-select组件的:items属性绑定到states数组，v-model属性绑定到gift.state，item-text属性设置为name，item-value属性设置为value。这样，当用户从下拉列表中选择一个选项时，gift.state的值将会更新，同时也会反映出所选的状态是“上架”还是“下架”。