Layui-Select + Vue的一次踩坑

最新推荐文章于 2024-09-09 23:58:41 发布

Crack-Maker

最新推荐文章于 2024-09-09 23:58:41 发布

阅读量748

点赞数 1

分类专栏：前端文章标签： vue js layui 前端 html5

本文链接：https://blog.csdn.net/qq_40166583/article/details/115973168

版权

本文讲述了在项目中同时使用LayUI和Vue时遇到的挑战，主要问题是LayUI的下拉框无法绑定Vue的双向数据绑定。作者详细描述了解决这两个问题的步骤：一是通过增加render函数解决下拉框点击问题；二是利用隐藏input和LayUI的form.on.select事件实现Vue变量的更新。最后，作者警告开发者避免混合使用直接操作DOM和虚拟DOM的框架。

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

缘起

因为项目用到了LayUI，项目又极其需要Vue的双向绑定功能，故糅合了这两种不同思维的框架，极其不建议这样使用。遇到的困难是：LayUI的Select无法绑定Vue的v-model。分了几步解决这个问题。

解决

原代码

<div class="layui-form-item">
  <label class="layui-form-label">行业分类:</label>
  <div class="layui-input-block">
    <select v-model="f1.a4">
      <option value="0">请选择</option>
      <option value="1">科学研究</option>