Vue ajax 请求后 更新 json数据

js

		$.ajax({
			type : "GET",
			url  : "foucsLists.json",
			dataType : "json",
			success  : function (data){
				var foucsLists = data["classify"];
				//vue
				var drawFocusLists = new Vue({
					el   : "#focus-list",
					data : {
						todos : foucsLists
					}
				});
				//zui popover
				$('[data-toggle="popover"]').popover({
					trigger   : 'hover',
					placement : 'top'
				});
			}
		});

json

{	
	"name" : "foucs", 
	"classify":[
		{
			"title" : "设计",
			"content":[
				{"siteName" : "UI-Cloud", "itemTitle" : "UI-Cloud", "itemContent" : "UI搜索引擎，设计师必备，提供用户界面PSD下载", "link" : "http://ui-cloud.com/"},
				{"siteName" : "优设网", "itemTitle" : "高大上", "itemContent" : "高大上的内容", "link" : "http://www.uisdc.com/"},
				{"siteName" : "优设网", "itemTitle" : "高大上", "itemContent" : "高大上的内容", "link" : "http://www.uisdc.com/"}
				
			] 
			
		},
		{
			"title" : "前端",
			"content":[
				{"siteName" : "前端1", "link" : "www.baidu.com"},
				{"siteName" : "前端2", "itemTitle" : "高大上", "itemContent" : "高大上的内容", "link" : "www.baidu.com"},
				{"siteName" : "前端3", "link" : "www.baidu.com"},
				{"siteName" : "前端4", "link" : "www.baidu.com"}
			] 
			
		}
	]
}

HTML

			<div class="page-content">
				<div id="focus">
					<!--focus list s-->
					<ul id="focus-list" class="">
						<li v-for="todo in todos" class="">
							<div class=" panel panel-info">
								<div v-cloak class="panel-heading">
									{{ todo.title }}
							    </div>
							    <div class="panel-body">
							    	<div class="item" v-for="list in todo.content">
							    		<a v-cloak :title="list.itemTitle" :href="list.link" data-toggle="popover" data-tip-class="popover-warning" :data-content="list.itemContent">{{ list.siteName }}</a>
							    	</div>
								</div>
							</div>
						</li>
					</ul>
					<!--focus list e-->
				</div>
			</div>

转载于:https://my.oschina.net/zhubaoxin/blog/897535