Здесь есть несколько проблем.
Функция data вызывается только один раз, когда создается соответствующий экземпляр Vue. Внутри этой функции вы можете получить ссылку на ее Vue экземпляр через this. В этот момент некоторые свойства, например, соответствующие props, уже будут существовать. Однако другие не будут.
Объект, возвращенный из data, используется для создания новых свойств в экземпляре. В этом случае вы создаете 4 свойства: topic1, topic2, currentBreed и breeds. Vue создает эти свойства на основе этого возвращаемого объекта, поэтому они не будут существовать до тех пор, пока не будет запущена функция data.
Поэтому, когда вы пишете { name: this.topic1 , key: this.topic1 }, в этой функции data, вы попытка получить доступ к свойству topic1, которое еще не существует. Как таковой он будет иметь значение undefined. Итак, вы создаете запись, эквивалентную { name: undefined , key: undefined },.
Кроме того, нет ссылки на topic1. Этот объект не будет обновляться при изменении значения topic1.
Также стоит отметить несколько моментов, касающихся синхронизации.
- Функция
data будет вызываться раньше перехват created, поэтому вызов axios не выполняется до тех пор, пока не будут заполнены свойства data. - Вызов
axios является асинхронным. - Использование
await может сделать код немного легче для чтения, но «ожидание» - это всего лишь иллюзия. Оставшийся код внутри функции не будет работать до тех пор, пока не будет решено ожидаемое обещание, но это не заставит ничего ждать вне функции. await эквивалентно использованию then. - Компонент будет визуализироваться сразу после вызова ловушки
created. Это синхронно, оно не будет ждать запроса axios. Затем будет вызван хук mounted, все до завершения вызова axios.
Все это означает, что вам может потребоваться настроить шаблон для обработки случая, когда вызов axios еще не завершена, так как изначально будет отображаться до того, как станут доступны значения topic1 и topic2.
В частности, для свойства breeds у вас есть несколько вариантов. Один из них заключается в том, чтобы ввести значения сразу после загрузки значения:
breeds: [
{ name: "" , key: "" }, // Initially empty values
{ name: "German Shepherd", key: "germanshepherd" },
// ...
const res = await this.promise;
this.topic1 = res.data[0].Trends;
this.topic2 = res.data[1].Trends;
this.breeds[0].name = this.breeds[0].key = this.topic1;
Другой - использовать свойство computed для breeds (вы удалите его из data для this):
computed: {
breeds () {
return [
{ name: this.topic1 , key: this.topic1 },
{ name: "German Shepherd", key: "germanshepherd" },
{ name: "Husky", key: "husky" },
{ name: "Pug", key: "pug" },
{ name: "(Error)", key: "error" },
]
}
}
Поскольку мы используем свойство computed, оно будет обновляться при изменении topic1 как реактивной зависимости.
Использование свойства computed возможно, наиболее естественное решение в этом случае, но есть и другие приемы, которые вы можете использовать, чтобы заставить это работать.
Например, вы можете использовать средства получения свойств для двух свойств в этом первом объекте размножения (это JavaScript получатели собственности, ничего общего с Vue):
data () {
const vm = this;
return {
topic1: null,
topic2: null,
currentBreed: 0,
breeds: [
{
get name () {
return vm.topic1;
},
get key () {
return vm.topic1;
}
},
{ name: "German Shepherd", key: "germanshepherd" },
{ name: "Husky", key: "husky" },
{ name: "Pug", key: "pug" },
{ name: "(Error)", key: "error" },
]
}
},
Я не защищаю этот подход для вашего случая использования, но это интересный способ сделать это, который иногда может быть полезным. Ключевым моментом, на который следует обратить внимание, является то, как зависимость от topic1 оценивается только при обращении к свойствам name и key, а не при выполнении функции data. Это позволяет регистрировать topic1 как зависимость от того, к чему обращаются name и key, например, во время рендеринга.