Методы laravel5.3 vue js не работают

[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'
    });

person Sri Rag    schedule 16.11.2016    source источник
comment
любой другой фрагмент кода, показывающий, где используется getusers? потому что здесь нет.   -  person PlayMa256    schedule 16.11.2016


Ответы (1)


Похоже, у вас здесь несколько проблем, и вы не предоставили достаточно информации для устранения общей проблемы. Я могу, по крайней мере, сообщить вам о нескольких проблемах, которые я вижу:

  1. В приведенном выше примере отсутствует закрывающий тег </template> после закрывающего тега </ul>.
  2. В вашем пользовательском компоненте вы никогда не вызываете метод getusers(), вы только определяете его. Основываясь на вашем коде, я предполагаю, что вы хотите установить items в качестве результатов метода getusers().
person zackkrida    schedule 16.11.2016
comment
1) извините, я пропустил копирование и вставку тегов ‹/template› и ‹/ul›. - person Sri Rag; 16.11.2016
comment
2) ‹форма v-on:submit.prevent=getusers › - person Sri Rag; 16.11.2016
comment
Вам нужно будет отредактировать исходный пост, чтобы мы могли увидеть весь блок кода. Спасибо! - person zackkrida; 16.11.2016
comment
при вызове getusers() при отправке формы мне нужно передать данные в вышеуказанный шаблон и отобразить их как вызов ajax.. я застрял с этой ошибкой.. после запуска команды gulp. у меня есть эта ошибка [предупреждение Vue]: свойство или метод getusers не определен в экземпляре, но на него ссылаются во время рендеринга. Обязательно объявите реактивные свойства данных в опции данных. (найден в корневом экземпляре) - person Sri Rag; 16.11.2016
comment
Находится ли <form v-on:submit.prevent="getusers" > внутри компонента «пользователи» или находится где-то еще? - person zackkrida; 16.11.2016
comment
да, это работает, когда я переместил содержимое формы в компонент user.vue... Большое спасибо!! - person Sri Rag; 16.11.2016
comment
Отлично. Для справки, методы, данные и т.д. в vue могут быть только непосредственно внутри компонента. Для обмена данными между компонентами см.: vuejs.org/v2/guide/components.html# Реквизит - person zackkrida; 16.11.2016
comment
Спасибо .... также данные формы не публикуются с ним ... есть ли другой способ! Я использовал this.formData для публикации - person Sri Rag; 17.11.2016
comment
this.$http.post('/users_search', this.formData).then(function(response) { console.log(response)}, function() { console.log('failed') }) - person Sri Rag; 18.11.2016
comment
@SriRag var formData = new FormData(), затем используйте formData (без этого), ознакомьтесь с документом FormData на mdn. Напишите еще один вопрос, если этого комментария недостаточно. - person PanJunjie潘俊杰; 18.11.2016