问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vant UI DropdownMenu 如何根据后端返回，自定义option属性名渲染呢？

头像
wswhy3
    204882145

    vant ui DropdownMenu 下拉菜单

    如何可以自定义options里的属性名，根据后端返回的来渲染呢？
    例：

    option1: [
  { name: '全部商品', id: 0 },
],

    修改成上面的属性名 渲染到页面上 有什么办法吗

    <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
    export default {
  data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
    };
  },
};
    vue.jsvant
    阅读 1.3k
    avatarAI BotBETA

    你可以在后端返回数据后，在前端代码中遍历这些数据，将每个对象的键名从 "name" 和 "id" 修改为 "text" 和 "value"，以适应 Vant UI 的 DropdownMenu 组件的需求。这样，你就可以根据后端返回的数据自定义 options 里的属性名，并将其渲染到页面上。

    以下是一个示例代码：

    export default {
  data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [],
      option2: [],
    };
  },
  created() {
    // 假设这是从后端获取的数据
    const backendData = {
      option1: [
        { name: '全部商品', id: 0 },
        { name: '新款商品', id: 1 },
        { name: '活动商品', id: 2 },
      ],
      option2: [
        { name: '默认排序', id: 'a' },
        { name: '好评排序', id: 'b' },
        { name: '销量排序', id: 'c' },
      ],
    };

    // 将后端数据转换为 Vant UI DropdownMenu 组件所需的格式
    this.option1 = backendData.option1.map(item => ({
      text: item.name,
      value: item.id,
    }));
    this.option2 = backendData.option2.map(item => ({
      text: item.name,
      value: item.id,
    }));
  },
};

    在这个示例中，我们在 created 生命周期钩子中从后端获取数据，并使用 map 方法遍历这些数据，将每个对象的 "name" 键名改为 "text"，"id" 键名改为 "value"。然后，我们将转换后的数据赋值给 option1 和 option2，这样 Vant UI 的 DropdownMenu 组件就可以正确地渲染这些选项了。

    1 个回答
    得票最新
    头像
    托尼维克
      42
      新手上路，请多包涵

      vant没有提供对应的修改方法，可以自己动手
      1.后端修改字段名

      2.前端修改字段名

      this.option1.map(item => item.text = item.name )
      查看全部 1 个回答
      推荐问题