laravel5.3 vue js 方法不工作
laravel5.3 vue js methods not working
[Vue warn]: 属性 或方法 "getusers" 未在实例上定义,但在渲染期间被引用。确保在数据选项中声明响应式数据属性。
(在根实例中找到)
users.vue 文件
<template>
<ul class="list-group">
<li class="list-group-item" v-for="item in items">
{{ item.fname }}
</li>
</ul>
</template>
<script>
export default {
data: function() {
return {
items: []
}
},
methods: {
getusers: function () {
this.$http.post('/users_search', this.formData).then(function(response) {
console.log(response)
}, function() {
console.log('failed')
})
}
}
}
</script>
在 app.js 文件中
Vue.component('users', require('./components/users.vue'));
const app = new Vue({
el: '#app'
});
看来您这里有几个问题,而且您没有提供足够的信息来调试整个问题。我至少可以让你知道我看到的几个问题:
- 在上面粘贴的示例中,您在
</ul>
结束标记之后缺少结束 </template>
标记。
- 在您的用户组件中,您从不调用
getusers()
方法,您只定义它。根据您的代码,我假设您想将 items
设置为 getusers()
方法的结果。
[Vue warn]: 属性 或方法 "getusers" 未在实例上定义,但在渲染期间被引用。确保在数据选项中声明响应式数据属性。 (在根实例中找到)
users.vue 文件
<template>
<ul class="list-group">
<li class="list-group-item" v-for="item in items">
{{ item.fname }}
</li>
</ul>
</template>
<script>
export default {
data: function() {
return {
items: []
}
},
methods: {
getusers: function () {
this.$http.post('/users_search', this.formData).then(function(response) {
console.log(response)
}, function() {
console.log('failed')
})
}
}
}
</script>
在 app.js 文件中
Vue.component('users', require('./components/users.vue'));
const app = new Vue({
el: '#app'
});
看来您这里有几个问题,而且您没有提供足够的信息来调试整个问题。我至少可以让你知道我看到的几个问题:
- 在上面粘贴的示例中,您在
</ul>
结束标记之后缺少结束</template>
标记。 - 在您的用户组件中,您从不调用
getusers()
方法,您只定义它。根据您的代码,我假设您想将items
设置为getusers()
方法的结果。