vant组件库-dropdownMenu组件自定义title vue技术交流群（864583465)

vant组件库-dropdownMenu组件自定义title

在利用vue开发h5页面时，通常我们选择的是vant作为我们的组件库，它提供60多个高质量组件，覆盖移动端各类场景。正如大多数组件库一样，很多都有这样或那样的bug，vant也是如此，本文要说的是vant中dropdownMenu组件自定义title无法及时更新title内容的bug。
1、首先看下面一段代码

<template>
  <div class="test">
    <van-dropdown-menu>
      <van-dropdown-item v-model="value" :options="option1" >
        <template slot="title">
          <span>{{ customizeTitle }}</span>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 0,
        option1: [
          { text: '全部商品', value: 0 },
          { text: '新款商品', value: 1 },
          { text: '活动商品', value: 2 },
        ],
        customizeTitle: '',
      };
    },
  };
</script>

2、上面的代码看起来似乎没什么问题，customizeTitle即为自定义的title，option1为下拉菜单的内容，value为绑定的当前下拉菜单的value值。然而当在不进行下拉操作，而直接改变customizeTitle时，你会发现页面并没有把你要改的这个customizeTile正常的渲染在页面上，当你再次改变customizeTile时，你回发现上一次改变的customizeTile渲染在了页面上，也就是页面只渲染上一次更改的customizeTile，当前更改的内容需要再下一次更改customizeTile 时才会渲染出来，不过当你点击一下菜单，customizeTile就会正常渲染出来。推测应该是该逐渐内部渲染逻辑的问题，希望广大网友有兴趣的可以研究一下这个问题，一起探讨。

3、解决方法
为了解决这个问题，我用van-button做了一个样子一样的菜单，利用dropdown的toggle方法，点击van-button会出发dropdown的下拉菜单打开，然后再正常选择菜单即可。

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键