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>
      <v-select
        :items="items"
        label="状态"
        v-model="state"
        item-text="label"
        item-value="value"
      ></v-select>
    </div>

    <div>
      <v-select
        :items="diamonds"
        label="是否钻石礼物"
        v-model="isDiamond"
        item-text="label"
        item-value="value"
        required
      ></v-select>
    </div>

    <div>
      <v-select
        :items="draws"
        label="是否抽奖礼物"
        v-model="isDraw"
        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';
  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,
        },

        isDiamond: 0,
        diamonds: [
          {
            value: 1,
            label: '是'
          },
          {
            value: 0,
            label: '否'
          },
        ],

        state: 0,
        items: [
          {
            value: 1,
            label: '上架'
          },
          {
            value: 0,
            label: '下架'
          },
        ],

        isDraw: 0,
        draws: [
          {
            value: 1,
            label: '是'
          },
          {
            value: 0,
            label: '否'
          },
        ]
      }
    },
    watch: {
      oldGift:{
        deep:true,
        immediate:true,
        handler(val){
         this.gift = Object.deepCopy(val,this.gift)
        }
      }
    },
    methods: {
      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>

列表如下

回显时只显示默认：

问gift的属性为下拉框时怎么回显？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

在Vue.js中，实现下拉框的回显数据通常涉及将传入的数据绑定到组件的v-model上。在你提供的代码中，你已经定义了oldGift属性，并且尝试在watch属性中使用Object.deepCopy方法来复制oldGift对象到this.gift对象上。然而，这个方法可能并不存在，你需要使用Vue的Object.assign或者展开运算符来实现深度拷贝。

首先，确保你的oldGift对象包含了所有需要回显的属性，并且这些属性的值是正确的。

接下来，你可以使用Object.assign或者展开运算符来更新this.gift对象。这里是使用展开运算符的示例：

watch: {
  oldGift: {
    deep: true,
    immediate: true,
    handler(val) {
      // 使用展开运算符进行深度拷贝
      this.gift = { ...val };
    }
  }
}

此外，你的isDiamond、state和isDraw变量应该根据oldGift中的值进行初始化，以确保下拉框能够显示正确的选项。你可以在data函数中这样做：

data() {
  return {
    // ...其他数据
    isDiamond: this.oldGift.isDiamond || 0,
    state: this.oldGift.state || 0,
    isDraw: this.oldGift.isDraw || 0,
  };
}

请注意，你需要确保oldGift中的isDiamond、state和isDraw属性是存在的，并且它们的值是1或0，这与你的下拉框选项的value匹配。

最后，确保你的v-select组件的v-model绑定到了正确的变量上。例如：

<v-select
  :items="items"
  label="状态"
  v-model="state"
  item-text="label"
  item-value="value"
></v-select>

确保state变量在组件的data函数中被正确初始化，并且在watch中被正确更新。

通过这些步骤，你应该能够实现下拉框的回显功能。如果仍然遇到问题，请检查oldGift对象的值是否正确传递到组件中，并且确保没有其他逻辑错误影响了数据的绑定和更新。