vant折叠面板collapse控件不生效

最新推荐文章于 2024-05-30 21:04:01 发布

liyanxu92

最新推荐文章于 2024-05-30 21:04:01 发布

阅读量2.5k

点赞数

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/liyanxu92/article/details/125314849

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天使用vant折叠面板collapse控件，测试的时候发现折叠面板一直打不开，网上搜了资料也没解决，检查代码也没发现什么问题，代码如下：

<van-collapse :v-model="activeNames">
  <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
  <van-collapse-item title="标题2" name="2" disabled>内容</van-collapse-item>
  <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
</van-collapse>

export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};

找了半天发现v-model绑定的时候多写了一个冒号，改成v-model="activeNames"后问题顺利解决，刚开始学习vue的时候偶尔会遇到多写冒号的情况，一定要细心，修改后代码：

<van-collapse v-model="activeNames">
  <van-collapse-item title="标题1" name="1">内容</van-collapse-item>
  <van-collapse-item title="标题2" name="2" disabled>内容</van-collapse-item>
  <van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
</van-collapse>


export default {
  data() {
    return {
      activeNames: ['1'],
    };
  },
};