vue.js - 多个查询，在同一个 div 中显示结果

Question

单击“流行”时，如何用新查询（getPopular）的结果替换内容？

（ v-for="casino in allCasinos" 需要改为显示： v-for="casino in getPopular" ）

<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>

Answer 1

在这种情况下，没有理由使用单独的查询 - 使用一个带有filter(beside limit) 参数的常见查询。

---

更新

casinos: gql`query casinos($filter: String!) {
    casinos(filter: $filter, limit: 6) {
        name
    }
}`,

Answer 2

您可以定义一个本地数据属性 ，casinos它存储您要显示的当前赌场集。casinos您可以在每个click处理程序中设置 的值。最后你可以在你casinos的：allCasinosv-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
  }
},