Я пытаюсь получить результаты из api на основе окна поиска пользователя. Когда пользователь вводит значение "en" или "de". Они должны получить результат от этого поиска. Мне нужно связать ввод пользователя с моей строкой запроса. Это работает, когда я вручную кодирую страну в шаблон, но не тогда, когда я привязываю значение к строке после того, как пользователь вводит значение во второй раз. Запрос "get", который использует пользовательское значение "запрос", отлично работает. Но не тогда, когда я свяжу это второй раз
Я хочу быть готовым к доступу к результатам [i].query.name Но ".query" не работает, когда я запрашиваю данные, если не ввести значение вручную ".en"
У меня есть json файл, который выглядит следующим образом:
[
{
"en": {
"name": "testone",
"id": 5363289,
"location": "messages_en.properties1"
},
"de": {
"name": "testonede",
"id": 5363289,
"location": "messages_en.properties2"
}
},
{
"en": {
"name": "test2",
"id": 5363289,
"location": "messages_en.properties3"
},
"de": {
"name": "test2de",
"id": 5363289,
"location": "messages_en.properties4"
}
}
]
Ниже представлен мой шаблон index.html vue.js
<div id=#app>
<input type="text" v-model="query" placeholder="Choose Language" />
<div class="medium-6 columns">
<a @click="getResult(query)" class="button expanded">Retrieve</a>
</div>
<template v-for="(result, i) in results">
<div class="card" style="width: 20rem; display:inline-block;">
<div class="card-block"></div>
<p> {{results[i].query}} </p>
<!-- works when I manually code in the 'en' query but when ran with 'query' it returns an error 'Cannot read property 'name' of undefined"' second time it returns that the value is -->
<!-- <p> {{results[i].en.name}} </p> -->
<!-- <p> {{results[i].query.name}} </p> -->
</div>
</template>
</div>
Vue.js
el: '#app',
data () {
return {
search: '',
query: 'en',
results: '',
title: '',
items: '',
section: ''
}
},
methods: {
getResult(query) {
axios.get('http://localhost:3000/api/country?country=' + query + '&blank=true').then(response => {
this.results = response.data;
console.log(this.results);
});
},
Чтобы получить доступ к свойству с помощью параметра, вам необходимо использовать условное обозначение, поэтому:
results[i][query].name
Вторая проблема заключается в том, что results[i][query]
будут неопределенными до тех пор, пока async
вызов не будет завершен, поэтому вам нужно будет проверить, что свойство не undefined
или использует boolean flag
. Итак, чтобы проверить, что это не определено, вы можете сделать что-то вроде:
<p v-if="!!results[i][query]">{{results[i][query].name}}</p>
<p v-else>Loading...</p>
Здесь упрощенный JSFiddle для этого: https://jsfiddle.net/4w3dxm22/
Или вы можете просто использовать флаг dataLoaded
:
new Vue({
el: '#app',
methods:{
getResult(query) {
this.dataLoaded = false; // set dataLoaded to false
axios.get('http://localhost:3000/api/country?country=' + query + '&blank=true').then(response => {
this.results = response.data;
this.dataLoaded = true; // Data has loaded so set dataLoaded to true
});
},
data: {
dataLoaded: false
}
})
Тогда вы можете сделать:
<span v-if="dataLoaded">{{results[i][query].name}}</span>
<span v-else>Loading Data...</span>
Здесь упрощенный JSFiddle для этого: https://jsfiddle.net/99ydx82u/
results[i][query].name