HTML in Vue. js не обновляется после ax ios получить запрос на обновление свойства объекта

Question

HTML в Vue. js не обновляется после получения запроса ios. HTML is:

<span @click="tryResponse">
        Data_object: {{ data_object }} <br>
        Data_object.serial: {{ data_object.serial }} <br>
</span>

data:

  data(){
    return{
        data_object: {},
    }
  },

метод:

methods: {
    tryResponse() {
        axios.get('http://127.0.0.1:8000/source/groups/15').then((response) => {
                this.data_object.serial = response.data});

}

Все это происходит в файле с именем App. vue ( если это важно).

Если я загляну в chrome dev tools Vue, я вижу, что объект данных обновляется и заполняется правильной информацией. Но он не обновляется в html на странице.

Редактировать: все работает нормально, если я делаю:

this.data_object = response.data

Но проблема возникает, когда я делаю это:

this.data_object.serial = response.data

Answer 1

Свойство serial никогда не объявляется в экземпляре vue и поэтому не является реактивным.

Вы можете использовать Vue.set(this.data_object, "serial", response.data), это регистрирует его с vue, поэтому оно добавит наблюдателей в эту переменную и он станет реактивным

или

объявит серийное свойство для объекта данных

 data(){
    return{
        data_object: {
            serial: ""
        },
    }
  },

Вот ссылка о реактивности в Vue