在尝试将jQuery的AJAX获取的数据绑定到Vue的v-for循环中时遇到问题。错误包括：1) 使用<tr>和<td>元素导致Vue报错，需改为div或span；2) 未在data中定义items，应迭代datas；3) AJAX成功回调中错误地赋值给datas，应赋值给items；4) 跨域问题未处理；5) items需在Vue实例的data中定义为数组。解决方案包括正确定义和使用items，以及考虑使用vue-resource来替代jQuery的AJAX请求。
<!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
建议使用vue-resource .
还有上面代码中涉及到了跨域 没有处理
你这个代码漏洞有点多。。。
items你定义了么？你应该在vue实例中的data中去定义他。
而且他应该是一个数组，所以
items:[]
。
定义了items之后，接下来就是更改，你ajax函数里面的变量，把datas换成items就好了，不好你打我。。。
不要盲目去模仿一种写法，形成定性思维了，items就是他的数据，他定义了你没定义，如何能用呢。
扫一扫
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
