Несколько запросов, показать результат в том же div - PullRequest
Новая
       24

Несколько запросов, показать результат в том же div

0 голосов
/ 05 апреля 2019

При нажатии «Популярные», как заменить содержимое результатом нового запроса (getPopular)?

(v-for = "casino in allCasinos" вместо этого нужно показать: v-for = "casino ingetPopular ") 

<div @click="activate(1); getPopular();">Popular</div>
<div @click="activate(2); getNew();">New</div>

<div id="list" v-for="casino in allCasinos" :key="casino.name">
  <div v-if="$apollo.loading">Loading...</div>
  <div>{{ casino.name}}</div>
</div>

<script>
import gql from 'graphql-tag';
methods: {
  activate:function(el){
      this.active_el = el;
  },
},
apollo: {
  allCasinos: gql`{
    allCasinos(limit: 6) {
      name,
    }
  }`,
  getPopular: gql`{
    getPopular(limit: 6) {
      name,
    }
  }`,
  getNew gql`{
    getNew(limit: 6) {
      name,
    }
  }`,
</script>

Ответы [ 2 ]

1 голос
/ 05 апреля 2019

В этом случае нет необходимости использовать отдельные запросы - используйте один общий запрос с параметром filter (рядом с limit).

<ч /> UPDATE 

casinos: gql`query casinos($filter: String!) {
    casinos(filter: $filter, limit: 6) {
        name
    }
}`,
0 голосов
/ 05 апреля 2019

Вы можете определить локальное свойство данных, casinos, которое хранит текущий набор казино, которые вы хотите отобразить.И вы можете установить значение casinos в каждом из ваших click обработчиков.Наконец, вы можете использовать casinos вместо allCasinos в вашем v-for: 

<div @click="activate(1); casinos = getPopular();">Popular</div>
<div @click="activate(2); casinos = getNew();">New</div>

<div id="list" v-for="casino in casinos" :key="casino.name">
  <div v-if="$apollo.loading">Loading...</div>
  <div>{{ casino.name}}</div>
</div>

<script>
import gql from 'graphql-tag';
data: function () {
  return {
    casinos: this.allCasinos
  }
},
...