Alpine.js通过标签过滤内容

Question

我正试图通过标签过滤内容，但我找不到任何适合我用例的好的解决方案。或者我想用错误的方法。

我要做的是根据用户选择过滤的tags简单地显示或隐藏内容。所有的内容都是预先生成的，用户可以看到，他们所能做的只是通过过滤器缩小内容范围。

我是Alpine.js的新手，所以我不知道这是否能以更好的方式完成。这段代码可以工作，我所做的只是将项目可见性设置为true，除非项目不属于活动的标记。但这感觉像是一个完全的开销(特别是当有多个标签可供选择时)。

<button x-data="{active:false}" @click="$dispatch('tag1'), active=!active" :class="{'bg-red-300': active}"> Tag1</button>
<button x-data="{active:false}" @click="$dispatch('tag2'), active=!active" :class="{'bg-red-300': active}"> Tag2</button>
<button x-data="{active:false}" @click="$dispatch('tag3'), active=!active" :class="{'bg-red-300': active}"> Tag3</button>
<button x-data="{active:false}" @click="$dispatch('tag4'), active=!active" :class="{'bg-red-300': active}"> Tag4</button>
<div x-data="{tag1: false, tag2: false, tag3: false, tag4: false}" @tag1.window="tag1=!tag1" @tag2.window="tag2=!tag2" @tag3.window="tag3=!tag3" @tag4.window="tag4=!tag4" >
<div x-show="true && (!tag3 && !tag4)">
Show if tag1 and/or tag2 is true. Hide if Tag3 and/or Tag4 is true
</div>
<div x-show="true && (!tag1 && !tag3)">
Show if tag2 and/or tag4 is true. Hide if Tag1 and/or Tag3 is true
</div>
</div>

我使用Laravel作为后端(仍然是新的)，我试图以这种方式过滤事物的原因是减少DB查询的数量，并使其看起来比每次刷新页面更流畅。

我也试着看看jQuery，但只有我能找到的例子是通过元素id或class过滤。这是我找到的最接近我需要的东西。是否有可能通过不同的属性进行过滤，例如x-data，这将包含内容所属的标签列表?

编辑:根据@Dauros的回答，这里是我最后做的一个更新版本，以防有人需要。除非选择了不属于该内容的标记，否则逻辑将被反转以始终显示内容。is_selected函数被更新为接受需要对!is_selected('[tag3,tag4]')隐藏的内容的标签列表。这样，从项目调用函数的需要减少到只有一个。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div class="h-full overflow-auto"
x-data="{
tags: [],
toggle(tag) {
if (this.tags.includes(tag)) {
this.tags = this.tags.filter(x => x != tag)
}
else {
this.tags.push(tag)
}
},
is_selected(tag) {
return this.tags.some(r=> tag.indexOf(r) >= 0)
}
}">
<button @click="toggle('tag1')" :style="is_selected('tag1') && {background: 'salmon'}">Tag 1</button>
<button @click="toggle('tag2')" :style="is_selected('tag2') && {background: 'salmon'}">Tag 2</button>
<button @click="toggle('tag3')" :style="is_selected('tag3') && {background: 'salmon'}">Tag 3</button>
<button @click="toggle('tag4')" :style="is_selected('tag4') && {background: 'salmon'}">Tag 4</button>
<div x-show="true && !is_selected('[tag3,tag4]')">
Show if tag1 and/or tag2 is true. Hide if Tag3 and/or Tag4 is true
</div>
<div x-show="true && !is_selected('[tag1,tag3]')">
Show if tag2 and/or tag4 is true. Hide if Tag1 and/or Tag3 is true
</div>
</div>

Answer 1

您可以使用列表并创建toggle(tag)和is_selected(tag)函数来切换和检查它们的状态，而不是为每个标记创建一个新变量。显示/隐藏逻辑仍然有点复杂，但你也可以在后端生成它。

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<div x-data="{
tags: [],
toggle(tag) {
if (this.tags.includes(tag)) {
this.tags = this.tags.filter(x => x != tag)
}
else {
this.tags.push(tag)
}
},
is_selected(tag) {
return this.tags.includes(tag)
}
}">
<div>
<button @click="toggle('tag1')" :style="is_selected('tag1') && {background: 'salmon'}">Tag 1</button>
<button @click="toggle('tag2')" :style="is_selected('tag2') && {background: 'salmon'}">Tag 2</button>
<button @click="toggle('tag3')" :style="is_selected('tag3') && {background: 'salmon'}">Tag 3</button>
<button @click="toggle('tag4')" :style="is_selected('tag4') && {background: 'salmon'}">Tag 4</button>
</div>
<br>

<div x-show="(is_selected('tag1') || is_selected('tag1')) && !(is_selected('tag3') || is_selected('tag4'))">
Show if tag1 and/or tag2 is true. Hide if Tag3 and/or Tag4 is true
</div>
<div x-show="(is_selected('tag2') || is_selected('tag4')) && !(is_selected('tag1') || is_selected('tag3'))">
Show if tag2 and/or tag4 is true. Hide if Tag1 and/or Tag3 is true
</div>
<br>

<div x-text="`Selected tags: ${tags}`"></div>
</div>