Question

我正在尝试为我的应用程序实现搜索组件，父组件有搜索文本框和按钮。当用户提供某些值时，我想将数据发送到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>

Answer 1

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

一旦您使用此变量，您就可以使用result有条件地呈现v-if组件。我想显示一个带有相应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>

在承诺数据存在时显示子组件，并在子组件中呈现数据

1 个答案: