Vue.JS + axios метод mounted не позволяет изменить данные в data, почему?

Question

[nezdhanov]

Есть компонет:

<template>
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>Truck</th>
            <th>action</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="truck in myinfo" class="trucks">
            <td>{{ truck.id }}</td>
            <td>{{ truck.name }}</td>
            <td>
                <router-link :to="{name: 'showTruck', params: {id: truck.id}}" class="btn btn-xs btn-default">
                    show
                </router-link>
            </td>
        </tr>
        </tbody>
    </table>
</template>

И есть логика этого скрипта:

import axios from 'axios'

    export default {
        data: function () {
            return {
                myinfo: [],
            }
        },
        mounted() {
            var app = this;
             axios.get('/api/get-trucks')
                 .then(function (resp) {
                     app.myinfo = resp.data;
                 })
                 .catch(function (resp) {
                     console.log(resp);
                     alert("Не удалось загрузить компании");
                 })
                 .finally(() => (console.debug(app.myinfo)));
        },
    }

Собственно ситуация следующая, данные с сервера приходят, а вот связанная данные не обновляюся.
Делал по заветам гугла и мануалов, может конечно что упустил, но вроде перепроверил все не раз...
Где я здесь ошибся? Почему данные не обновляются?

Comments

[alex]

resp.data это что?

почему солянка из обычных и стрелочных функций? зачем сохранять контекст когда стрелочные функции есть?

[Александр]

Почему у вас перемешаны обычные и стрелочные функции?

[nezdhanov]

Alex, Ну на сколько я понимаю(Может ошибаюсь конечно), но resp это ответ от сервера, который прилетает в:
.then(function (resp){});

PS Может я чего и не понимаю(

[nezdhanov]

Александр, А в данном контексте это как-то может влиять?

[alex]

nezdhanov, откройте дев тулзы и в сетвом экране отключите кэш и повторите запрос

еще попробуйте так app.myinfo = [...resp.data];

Answer 1

[Константин Б.]

Все зависит от того как с сервера возвращаются данные. Возможно поменять app.myinfo = resp.data; на app.myinfo = resp.data.data; и все заработает

Comments

[nezdhanov]

console.log(resp.data);
Ответ от сервера такой:

spoiler

[…]
​​
0: Object { id: Getter & Setter, name: Getter & Setter, type_truck_id: Getter & Setter, … }
​​
1: Object { id: Getter & Setter, name: Getter & Setter, type_truck_id: Getter & Setter, … }

Т.е. в data лежит Array.
PS app.myinfo = resp.data.data; не помогло...

[nezdhanov]

Даже вот так никак не влияет на результат:

var app = this;
            axios.get('/api/get-trucks')
                .then(function (resp) {
                    app.myinfo = [{'id': 1, 'name': 'test'}];
                })
                .catch(function (resp) {
                    console.log(resp);
                    alert("Не удалось загрузить компании");
                });

Т.е все что там происходит на Vue.JS вообще никак не влияет ???!!!

[jazzus]

nezdhanov, попробуйте кеш браузера сбросить

[nezdhanov]

jazzus, Вариант), но не помогло...

[jazzus]

nezdhanov, а так

.then(resp => {
        app.myinfo = [{'id': 1, 'name': 'test'}];
})

[nezdhanov]

jazzus,
Убиться и не встать:

var app = this;
            app.myinfo = [{'id': 1, 'name': 'test'}];
            axios.get('/api/get-trucks')
                .then(response => {
                  //  app.myinfo = [{'id': 1, 'name': 'test'}];
                })
                .catch(function (resp) {
                    console.log(resp);
                    alert("Не удалось загрузить компании");
                });
         //   app.myinfo = [{'id': 2, 'name': 'test'}];

Вне метода then оно работает! Т.е. Vue JS видит эти изменения и перестраивает все.
А в методе then нет, данные вроде бы через console.debug видно, что меняются, но по факту на странице изменений ноль...

[jazzus]

nezdhanov, кеш браузера

[jazzus]

nezdhanov, и response замените на resp

[nezdhanov]

Кеш - почистил, resp поставил. Результат тот-же...

[jazzus]

nezdhanov, app.myinfo раскомментировали?)) в примере он выключен. У вас где данных нет?

[jazzus]

nezdhanov, попробуйте так

.then(resp => {
         app.myinfo = resp.data;
})

и сбросить кеш

[nezdhanov]

jazzus,
Из кода:

.then(resp => {
                    app.myinfo = resp.data;
                })

Кеш- стирильный, данные с сервера приходят НО! по все логике в методе then() они должны
присвоиться переменной app.myinfo, и они таки присваиваются, console.log об этом говорит. НО! после завершения then изменения на странице так и не происходят....
Т.е вот здесь ничего больше не отрабатывает:
<tr v-for="truck in myinfo" class="trucks">

[nezdhanov]

Подозрение на то, что не срабатывает событие самого Vue.JS , т. е. данные модифицируются а фреймворк это игнорирует

[jazzus]

nezdhanov, у вас Vue Devtools есть? Там можно увидеть действительно ли данные есть в myinfo.
в цикле нужен ключ

<tr v-for="truck in myinfo" :key="truck.id" class="trucks">

[Ihor Bratukh]

Вместо app.myinfo = resp.data попробуйте

resp.data.data.forEach((el, i) => app.$set(app.myinfo, i, app.myinfo[i])

И перепишите на стрелочные функции, больно смотреть ..

Answer 2

[2perca]

вместо хука mounted() используйте created(),
так же избавьтесь от var app = this;, используйте просто this, например this.myinfo = resp.data; и перепишите блоки then и catch на стрелочные функции.

Answer 3

[Владислав]

nezdhanov почитайте как работаетthis в асинхронных функциях. Внутриthen у вас будет работать this, единственное что вам надо было писать this.myinfo вместо app.myinfo.
А чтобы вообще по красоте сделать, используй стрелочные функции и тогда не нужен будет костыль типа var app = this;
Вот пример стрелочной функции если что

.then((response) => {
                    console.log(this.users);
                    this.users = response.data;
                })