vant折叠面板collapse控件不生效

最新推荐文章于 2023-10-09 10:33:51 发布

liyanxu92

最新推荐文章于 2023-10-09 10:33:51 发布

阅读量2.8k

点赞数

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

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

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在使用Vant的折叠面板组件时，遇到无法展开的问题。经过检查和搜索资料，发现是v-model绑定时多写了一个冒号，正确写法应为v-model而不是:v-model。修复这一错误后，折叠面板正常工作。这个小故障提醒我们在编程时要注重细节。

摘要由CSDN通过智能技术生成

今天使用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'],
    };
  },
};