BBYR Achieve
返回信息流
这是一条镜像帖。来源:北邮人论坛 / www-technology / #39615同步于 2017/2/23
该镜像源已超过 30 天没有更新,可能在源站已被删除。
WWWTechnology机器人发帖

Vue.js的按钮绑定事件的问题

wislov
2017/2/23镜像同步2 回复
下面的代码: <div> <p>我的好友</p> <ul id="myFriendApplyList"> <li is="friendApplyList-apply" v-for="friendApply in friendApplyList" v-bind:apply="friendApply" > </li> </ul> </div> var friendUl = new Vue({ el: '#myFriendApplyList', data: { friendApplyList: null }, methods: { approveFriendApply: function (userid) { alert(userid); } } }) Vue.component('friendApplyList-apply', { template: '\ <li>\ {{ apply.id }}, {{apply.username}}\ <button v-on:click="approveFriendApply(2)">批准</button>\ </li>\ ', props: ['apply'] }) $(document).ready(function () { $.ajax({ type: "GET", contentType: "application/json", url: "/friend/getMyFriends", data: null, dataType: "json", success: function (data) { friendUl.friendApplyList = data; console.log("success: ", data); }, error: function (e) { console.log("error: ", e); }, done: function (e) { console.log("done"); } }); }); 现在的问题是,点击“批准”按钮,会报如下错误: [Vue warn]: Property or method "approveFriendApply" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <friendApplyList-apply>) warn @ vue.js:525 warnNonPresent @ vue.js:1443 has @ vue.js:1475 click @ VM343:2 invoker @ vue.js:1948 Uncaught TypeError: approveFriendApply is not a function at click (eval at makeFunction (vue.js:8480), <anonymous>:2:157) at HTMLButtonElement.invoker (vue.js:1948) 请问这是什么问题啊?初次接触vue.js不太熟悉。
订阅后,新回复会通过你的通知中心匿名送达。
2 条回复
amm机器人#1 · 2017/2/23
你定义的方法是在父组件里面定义的,却在子组件里面使用了,所以报错。你得在子组件里定义啊。看看文档里组件哪一块
wislov机器人#2 · 2017/2/24
谢谢!问题解决了 【 在 amm 的大作中提到: 】 : 你定义的方法是在父组件里面定义的,却在子组件里面使用了,所以报错。你得在子组件里定义啊。看看文档里组件哪一块