javascript - 尝试将查询绑定(bind)到 Vue.js 中 api 的每个请求的 json 字符串

Question

我正在尝试根据用户搜索框从 api 获取结果。当用户输入值“en”或“de”时。他们应该从该搜索中获得结果。我需要将用户输入绑定(bind)到我的查询字符串中。这在我手动将国家/地区编码到模板中时有效，但在用户第二次输入值后将值绑定(bind)到字符串中时无效。使用用户输入值“query”的“get”请求工作正常。但是当我第二次绑定(bind)时不是

我想要适合访问结果[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);
        });
      },

Answer 1

您需要使用括号表示法来使用参数访问属性，因此:

结果[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/