存在承诺数据时显示子组件并在子组件中渲染数据答案

【问题标题】：Show child component when promise data is exists and also render the data in child omponent存在承诺数据时显示子组件并在子组件中渲染数据
【发布时间】：2018-01-22 15:16:33
【问题描述】：

我正在尝试为我的应用程序实现搜索组件，父组件具有搜索文本框和按钮。当用户提供一些值时，我想将数据发送到 api 并在子组件中显示结果。我有点困惑在哪里调用 api 以及如何在子组件中填充数据。另外，最初我的子组件不应该在父组件中呈现，当搜索得到一些结果时它可以呈现。请帮助我如何在 vue js 2 中实现搜索功能。

父组件

<template>
  <div><h3> Search </h3></div>
  <div class="row">
    <form role="search">
        <div class="form-group col-lg-6 col-md-6">
            <input type="text" v-model="searchKey" class="form-control">
        </div>
        <div class="col-lg-6 col-md-6">
            <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getInputValue">Search</button>
        </div>
    </form>
  </div>
  <result :searchdataShow='searchData'></result>
</template>
<script>
 import resultView from './result'
 export default {
  components: {
    'result': resultView
  },
 data () {
    return {
      searchKey: null,
      searchData: null
    }
  },
  methods: {
   getInputValue: function(e) {
     console.log(this.searchKey)
     if(this.searchKey && this.searchKey != null) {
       this.$http.get('url').then((response) => {
         console.log(response.data)
         this.searchData = response.data
       })
     }
   }
}
</script>

搜索结果组件（子组件）

<template>
  <div>
   <div class="row"><h3> Search Results</h3></div>
  </div>
</template>
<script>
  export default {
   props: ['searchdataShow']
  }
</script>

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

创建一个布尔变量来跟踪您的 ajax 请求，我通常将其称为 loading 或 fetchedData，具体取决于上下文。 ajax调用前设置为true，调用后设置为false。

一旦你让这个变量工作，你就可以使用v-if 有条件地渲染result 组件。我喜欢显示一个带有相应v-else 的加载图标。

此外，您的模板似乎没有根元素，这是必需的。

<template>
  <div><h3> Search </h3></div>
  <div class="row">
    <form role="search">
        <div class="form-group col-lg-6 col-md-6">
            <input type="text" v-model="searchKey" class="form-control">
        </div>
        <div class="col-lg-6 col-md-6">
            <button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getInputValue">Search</button>
        </div>
    </form>
  </div>
  <result v-if="!loading" :searchdataShow='searchData'></result>
  <div v-else>loading!!</div>
</template>
<script>
 import resultView from './result'
 export default {
  components: {
    'result': resultView
  },
 data () {
    return {
      loading: false,
      searchKey: null,
      searchData: null
    }
  },
  methods: {
   getInputValue: function(e) {
     console.log(this.searchKey)
     this.loading = true;
     if(this.searchKey && this.searchKey != null) {
       this.$http.get('url').then((response) => {
         console.log(response.data)
         this.loading = false;
         this.searchData = response.data
       })
     }
   }
}
</script>

【讨论】：