Search code examples
laravellaravel-5vue-resourcevue.js

laravel5.3 vue js methods not working


[Vue warn]: Property or method "getusers" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

users.vue file

<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>

in the app.js file

   Vue.component('users', require('./components/users.vue'));

    const app = new Vue({
        el: '#app'
    });

Solution

  • It looks like you have several issues here, and that you have not provided enough information to debug the overall problem. I can at least let you know about a couple of issues I see:

    1. In the pasted example above you are missing a closing </template> tag after the closing </ul> tag.
    2. In your users component, you never call the getusers() method, you only define it. Based on your code, I assume you want to set items as the results of the getusers() method.