Показать все данные при загрузке страницы в Laravel + Vue - PullRequest
Новая
       33

Показать все данные при загрузке страницы в Laravel + Vue

1 голос
/ 05 апреля 2019

В настоящее время я учусь vue с laravel. Я делаю простой сайт todo. Я делаю все вещи в welcome.blade.php. Я могу хранить задачи, но не могу просмотреть все задачи. Вот что я попробовал

welcome.blade.php 

 <div class="card-body">
       <div class="col-md-12">
           <div class="form-group">
                <input type="submit" @click.prevent="createTodo()" value="Create">
                <input type="text" class="form-control col-md-10" v-model="todo.taskName">
            </div>
       </div>
       <hr>
       <div class="content">
             @{{ todo }}
       </div>
</div>

код Vue 

const app = new Vue({
    el: '#todo',
    data: {
        todo: {
            taskName: ''
        }
    },
    methods: {
        createTodo: function createTodo() {
            var _this = this;
            var input = this.todo;
            axios.post('/create-todo', input).then(function (response) {
                _this.todo = {'taskName': ''};
                _this.getVueItems();
            });
        },
        getData: function getData(){
            axios.get('/').then(function (response) {
                this.todo = response.data;
            })
        }
    },
    mounted: function () {
        this.getData();
    }
});

web.php 

Route::get('/', function () {
    return view('welcome');
});

Route::post('create-todo', 'TodoController@store');

Я запутался в том, как вернуть данные. Потому что / route напрямую возвращает представление.

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

Всякий раз, когда вы используете VueJS, вы используете интерфейсный инструмент.Этот интерфейсный инструмент будет получать данные из «серверной» части.Вам нужно возвращать данные, а не HTML (если у вас нет особых причин для этого)

Возврат данных: 

Route::get('/', function () {
    return Todo::all();
});

В Vue: 

 axios.get('/').then(response => {
   this.todo = response.data;
 })

Обратите внимание на response => {...}.Если вы не используете запись ECMA6, this будет ссылаться на саму функцию, а не на экземпляр Vue.

Поскольку вы новичок, я настоятельно советую вам проверить это https://developers.google.com/web/tools/chrome-devtools/network/

Это руководство поможет вам понять (увидеть) возвращенные данные и понять, что происходит "под капотом"."

РЕДАКТИРОВАТЬ

Также уточним немного больше: вы возвращаете коллекцию, которую вам придется просмотреть.В противном случае вы будете показывать json объект

1 голос
/ 05 апреля 2019

Попробуйте добавить другой маршрут, например: 

 Route::get('get-todos', 'TodoController@index');

и в вашем распоряжении: 

 axios.get('/get-todos').then(function (response) {
            this.todo = response.data;
        })

ваш контроллер должен выглядеть так: 

       public function index(){
               return Todo::all();
        }

Если вы хотите использовать тот же URL, попробуйте это: 

 Route::get('/', function (Request $request) {
          if($request->ajax()){
             return Todo::all(); 
          } else{
             return view('welcome');
           } 
  });
...