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

Question

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' },      ],    };  },};

Answer 1

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

2.前端修改字段名

this.option1.map(item => item.text = item.name )

Answer 2

你可以在后端返回数据后，在前端代码中遍历这些数据，将每个对象的键名从 "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 组件就可以正确地渲染这些选项了。