Попытка привязать запрос к строке json для каждого запроса к API в Vue.js

Question

Попытка привязать запрос к строке json для каждого запроса к API в Vue.js

1

Я пытаюсь получить результаты из 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);
        });
      },

themanwiththemasterplan 14 янв. 2018, в 12:34

Источник

2

Вам нужно сделать: results[i][query].name
craig_h 14 янв. 2018, в 11:29
0

Возможный дубликат динамически доступного свойства объекта с использованием переменной
yuriy636 14 янв. 2018, в 11:29
0

Когда я console.log (this.query); Я получаю правильный результат каждый раз. Но как я могу передать это в строку запроса индекса {{results [index] .query.name}} без сбоев? Я получаю имя как неопределенное. Когда я связываю {{query}}, я получаю правильный результат, и когда я связываю {{results [i]}}, но я хочу иметь возможность также связывать запрос
themanwiththemasterplan 14 янв. 2018, в 11:31
0

@craig_h Спасибо, это то, что я искал. Но теперь, когда я ввожу новый запрос в поле поиска, когда я печатаю, я получаю сообщение об ошибке «[Vue warn]: Ошибка при рендеринге:« TypeError: Невозможно прочитать свойство 'name' of undefined "" перед отправкой кнопка. Но когда я отправляю данные в порядке
themanwiththemasterplan 14 янв. 2018, в 11:37

Показать ещё 2 комментария

Теги:

javascript

json

vue.js

api

1 ответ

Ещё вопросы

Возможный дубликат динамически доступного свойства объекта с использованием переменной
Когда я console.log (this.query); Я получаю правильный результат каждый раз. Но как я могу передать это в строку запроса индекса {{results [index] .query.name}} без сбоев? Я получаю имя как неопределенное. Когда я связываю {{query}}, я получаю правильный результат, и когда я связываю {{results [i]}}, но я хочу иметь возможность также связывать запрос
@craig_h Спасибо, это то, что я искал. Но теперь, когда я ввожу новый запрос в поле поиска, когда я печатаю, я получаю сообщение об ошибке «[Vue warn]: Ошибка при рендеринге:« TypeError: Невозможно прочитать свойство 'name' of undefined "" перед отправкой кнопка. Но когда я отправляю данные в порядке

craig_h · Accepted Answer · 2018-01-14T10-17-00.000Z

Чтобы получить доступ к свойству с помощью параметра, вам необходимо использовать условное обозначение, поэтому:

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/