单击“热门”时,如何用新查询(getPopular)的结果替换内容?
(v-for =“ allcasinos中的赌场”需显示:v-for =“ casin 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>
答案 0 :(得分:1)
在这种情况下,没有理由使用单独的查询-使用带有filter
(在limit
旁边)参数的一个常见查询。
casinos: gql`query casinos($filter: String!) {
casinos(filter: $filter, limit: 6) {
name
}
}`,
答案 1 :(得分:0)
您可以定义本地数据属性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
}
},