Question

我试图根据用户搜索框从api获取结果。当用户输入值＆＃39; en＆＃39;或者＆＃39; de＆＃39;他们应该从搜索中获得结果。我需要将用户输入绑定到我的查询字符串中。当我手动将国家/地区编码到模板中时，这种方法有效，但在用户第二次输入值后将值绑定到字符串中时则不行。＆＃39;得到＆＃39;请求使用用户输入值＆＃39;查询＆＃39;工作良好。但是当我第二次绑定它时不会这样做

我想要适合访问结果[I] .query.name 但是＆＃39; .query＆＃39;我查询数据时无效，除非我手动输入值＆＃39; .en＆＃39;

我有一个类似于以下

的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

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

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/

尝试将查询绑定到json字符串，以便为Vue.js中的api中的每个请求绑定

1 个答案: