vue与jquery合作

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_30580943

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/iLoveMyD/p/6444674.html

本文介绍如何解决Vue实例初始化时可能遇到的异步数据加载问题，通过使用jQuery的$.get方法获取数据并更新Vue实例的状态，确保数据正确渲染。同时提及了使用<a>标签时防止页面刷新的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2017年2月26日 14:59:34 星期日

场景:

jquery的$.post, $.get是$.ajax的封装, 是异步的

因此, 有肯能在初始化vue实例的时候, 异步请求的结果还没返回, 这就导致vue不能渲染dom

解决方法是:

1. 先初始化vue对象, 关键点是, 要把随后要用到的变量留空;

2. 再调用jquery远程请求接口, 重新赋值给vue

代码:

 1 var vm = new Vue({
 2         el: '#addArticle',
 3         data: {
 4             cat_list: '',
 5             top:''
 6         }
 7     });
 8     $.get(cats_url, function (msg) {
 9         vm.cat_list = msg.result;
10     });
11 
12     $.get(top_url, function (msg) {
13         vm.top = msg.result;
14     });