javascript - jquery的ajax和vue的v-for 无法绑定动态数据？
本文介绍了javascript - jquery的ajax和vue的v-for 无法绑定动态数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app_m">
<button v-on:click="getData">电影</button>
<tr v-for="item in items">
<td>{{item.title}}</td>
<!--<td>{{item.year}}</td>-->
<!--<td>{{item.subtype}}</td>-->
</tr>
</div>
<script src="vue.js"></script>
<script src="jquery-3.2.0.js"></script>
<script>
var web_douban = new Vue({
el : '#app_m',
data :{
datas:''
},
methods :{
getData : function () {
$.ajax({
type : 'Get',
dataType : 'jsonp',
url : ' http://api.douban.com/v2/movie/top250',
success : function (data) {
web_douban.data=data.subjects;
console.log(web_douban.data)
}
})
}
}
})
</script>
</body>
</html>
这里显示的报错信息
这是那个对象
解决方案
最重要的一个错误： 把<tr>,<td>换掉，td是配合table用的，你单独的让vue去使用它会报错的.你可以先将它改成div,span
第一个错误：
你的<tr v-for="item in items"> items 没有在data中去定义，所以vue告诉你这个是错误的， 看你的写法应该是想迭代datas吧？
第二个错误：
ajax success 函数中赋值不对， 你的v-for是迭代的items，为什么要给datas赋值？所以你在v-for中应该把items换成datas
这篇关于javascript - jquery的ajax和vue的v-for 无法绑定动态数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
