Question

我想使用Apollo创建一个包装器组件，它在props中接收不同的GraphQL查询和变量，查询GraphQL源并将响应传递给其子组件。我想在具有不同查询的页面上两次使用此组件。

但我觉得我在某个时候陷入困境。我最终让组件的两个实例都使用相同的输入：第一个下拉组件的查询prop正在页面上的所有下拉列表中使用。虽然它们具有不同的范围，不同的关键字和项目，但页面上的所有下拉列表都使用第一个下拉列表的查询。

这是我的DropdownSearch组件。它将关键字从搜索栏组件传递到查询列表组件：

<template>
  <div class="dropdown-search">
    <div class="dropdown-search-display" @click="toggleDropdown"> 
      <span>{{value[nameProp]}}</span>
      <span class="dropdown-search-dropdown-toggle">
        <i v-if="!isOpen" class="fa fa-caret-down" aria-hidden="true"></i>
        <i v-if="isOpen" class="fa fa-caret-up" aria-hidden="true"></i>
      </span>
    </div>
    <div :class="{ 'dropdown-search-dropdown': true, 'dropdown-search-dropdown--open': isOpen}" >
      <search-bar v-model="searchKeyword" class="dropdown-search-searchbar"></search-bar>
      <div class="dropdown-search-list">
        <query-list
          :query="query"
          :keyword="searchKeyword"
          :listItemComponent="ListItem"
        ></query-list>
      </div>
    </div>
  </div>
</template>

<script>
const ListItem = {
  template: '<div class="dropdown-search-list-item">{{record.name}}</div>',
  props: {
    record: { required: true },
  },
};

export default {
  name: 'dropdownSearch',
  props: {
    name: String,
    nameProp: String,
    value: Object,
    query: Object,
  },
  components: {
    'dropdown-list-item': ListItem,
  },
  data() {
    return {
      isOpen: false,
      searchKeyword: '',
      ListItem,
    };
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen;
    },
  },
};
</script>

QueryList组件，它使用Apollo进行查询并显示结果列表：

<template>
  <div class="">
    <loading-indicator :isLoading="loading > 0"></loading-indicator>
    <ul class="app__list">
      <li class="app__list-item" v-for="item in items" :key="item.id">
        <component
          :is="listItemComponent"
          :record="item"
        ></component>
      </li>
    </ul> 
  </div>
</template>

<script>
export default {
  name: 'queryList',
  props: {
    query: Object,
    keyword: String,
    listItemComponent: { required: true },
  },
  data() {
    return {
      items: [],
      loading: 0,
    };
  },
  apollo: {
    items: {
      query() {
        return this.query;
      },
      variables() {
        return {
          keyword: this.keyword || '',
        };
      },
      loadingKey: 'loading',
    },
  },
};
</script>

这就是我在页面上使用Dropdown Search组件的方式：

   <label class="edit-record-field">
        <span class="edit-record-field-label">Category</span>
        <dropdown-search 
          class="edit-record-field-input"
          v-model="record.category"
          :nameProp="'name'"
          :query="getCategories"
        ></dropdown-search>  
   </label>
      <label class="edit-record-field">
        <span class="edit-record-field-label">Location</span>
        <dropdown-search 
          class="edit-record-field-input"
          v-model="record.location"
          :nameProp="'name'"
          :query="getLocation"
        ></dropdown-search>  
   </label>

我正在寻找解决方案。如果你能帮助我让我的组件工作，我将不胜感激。

在同一页面上使用带有不同查询的vue-apollo组件

0 个答案: