色空大师 2024-05-23 15:05 采纳率: 40.9%
浏览 123

vue的下拉框怎么回显数据

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>

列表如下

img

回显时只显示默认:

img


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

展开全部

  • 写回答

4条回答 默认 最新

  • 阿里嘎多学长 2024-05-23 15:05
    关注

    以下内容由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 };
        }
      }
    }
    

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

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

    请注意,你需要确保oldGift中的isDiamondstateisDraw属性是存在的,并且它们的值是10,这与你的下拉框选项的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对象的值是否正确传递到组件中,并且确保没有其他逻辑错误影响了数据的绑定和更新。

    展开全部

    评论 编辑记录
  • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-23 15:05
    关注

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

    为了实现下拉框回显数据,你需要在data对象中初始化对应的下拉框选中值,并在watch中监听oldGift的变化,然后根据旧礼物数据更新下拉框的值。这里我会对代码进行相应的调整。

    首先,在data中为每个下拉框添加初始值,对应于它们的默认选项(例如:对于状态下拉框,选择第一个上架项):

    data() {
      ...
      return {
        ...
        gift: {
          ...,
          state: this.items[0].value, // 初始化状态为上架
          isDiamond: this.diamonds[0].value, // 初始化是否钻石礼物为否
          isDraw: this.draws[0].value, // 初始化是否抽奖礼物为否
        },
        ...
      };
    },
    

    接下来,更新watch中的逻辑,将deep属性移除并修复复制方法。使用Vue的Object.assign()方法替换深拷贝,确保不会报错:

    watch: {
      oldGift(newVal) {
        if (newVal) {
          Object.assign(this.gift, newVal);
        }
      },
    },
    

    现在,当oldGift变化时,下拉框会自动回显相应的值。如果你想要在页面加载时就回显数据,可以调用一个初始化函数,比如initFormData,并在mounted钩子中调用它:

    export default {
      ...
      mounted() {
        this.initFormData();
      },
      methods: {
        initFormData() {
          if (this.oldGift) {
            Object.assign(this.gift, this.oldGift);
          }
        },
        ...
      },
    };
    

    这样,当组件挂载后,就会立即检查是否有旧礼物数据,并将其应用到表单字段和下拉框中。现在,当你编辑已存在的礼物时,下拉框将会正确地回显之前的状态、是否钻石礼物以及是否抽奖礼物的选择。

    展开全部

    评论 编辑记录
  • 关注

    晚上好🌙🌙🌙
    本答案参考ChatGPT-3.5

    问题分析:这个 Vue 组件里面有三个下拉框,通过 v-model 双向绑定实现。但是在组件mounted之后需要赋值gift数据(根据具体场景而定)到gift对象上的时候,发现数据没有回显到下拉框中。

    解决方案:

    • 在 mounted 阶段赋值。

    方法一:

    这里的方案最基础,可以赋值到事件循环队列中,等到 DOM 节点初始化完成后在将值带上给下拉框属性。

    mounted() {
      setTimeout(()=>{
         this.gift.state = this.oldGift.state
         this.gift.isDraw=this.oldGift.isDraw
         this.gift.isDiamond=this.oldGift.isDiamond
      })
    }
    

    方法二:

    import _ from 'lodash' // 引入 lodash
    
    mounted() {
      this.gift = _.cloneDeep(this.oldGift)
    }
    
    • 在 watch 中加一个对比旧值和新值的部分。我们只需要将新值赋值给gift对象即可。
    watch: {
      oldGift(newVal, oldVal) {
        if (newVal !== oldVal) {
          this.gift = newVal
        }
      }
    }
    

    参考文献:(https://jestemhz.gitbooks.io/vuejs-faq/content/zh-cn/2.html)

    展开全部

    评论
  • 百锦再@新空间代码工作室 全栈领域优质创作者 2024-05-23 15:06
    关注

    对于vue的下拉框回显数据,可以使用v-model绑定选项的值,再通过设置该值来实现回显。

    在你所提供的代码中,根据v-select的使用可以看出,你可能需要在data中新增一个属性来存储当前选中的值,例如:

    data() {return {state: '', // 存储选中的状态值// 其他属性...}}

    然后在v-select中将v-model绑定到这个属性上:

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

    这样,当你需要回显下拉框的值时,只需要设置state的值为你想要回显的选项的值即可。例如:

    this.state = 0;
    // 设置state的值为0,回显对应的选项

    需要注意的是,回显的值必须是items中存在的选项的item-value的值。

    另外,你的代码中,有一处isDiamond属性重复定义了两次,你可能需要修正一下。

    希望以上解答能够对你有所帮助!


    有问题你别着急,评论留言都可以,看到马上就回复,尽量及时补充齐
    评论
编辑
预览

报告相同问题?

问题事件

  • 创建了问题 5月23日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部