Как я могу фильтровать теги с помощью Alpine.js

Я хочу фильтровать теги на основе кликов пользователя. Но проблема в том, что когда я использую тег HTML, все становится скрытым, так как я не вижу никакого содержимого на странице. Даже при нажатии на определенный тег, я не вижу никаких результатов. Результат после использования

Модель.py :

class Challenge_code(models.Model): #create a table
    auther = models.ForeignKey(User, on_delete = models.CASCADE)
    title = models.CharField(max_length = 200, null = False)
    body =RichTextUploadingField(blank=True, null=True)
    image = models.ImageField(null = True,blank=True ,upload_to='attach/')
    created_at = models.DateTimeField(auto_now_add = True)
    updated_at = models.DateTimeField(auto_now = True)
    tags = TaggableManager()

    def __str__(self):
        return self.title

serializers.py

from rest_framework import serializers
from taggit.serializers import (TagListSerializerField,
                                TaggitSerializer)
from .models import Challenge_code



class ChallengeSerializer(TaggitSerializer, serializers.ModelSerializer):
    tags = TagListSerializerField()
    class Meta:
        model = Challenge_code
        #fielsds = ('id','title','body','image','tags')
        fields = '__all__'

urls.py :

urlpatterns =[
    path('challengePage/', views.ChallengePage, name ='challengePage'),
   path('tag/<slug:tag_slug>', views.ChallengePage, name='tag'),
    path('challenge-list/', views.ChallengeListAPIView.as_view(), name='challenge-list'),
    
]

the views.py :

def ChallengePage(request):
    challenges = Challenge_code.objects.prefetch_related('tags').all().order_by('-created_at')
    tags = Tag.objects.all()
    context = {
        'challenges' : challenges,
        'tags':tags,
    }
    return render(request,'challengePage.html',context)

class ChallengeListAPIView(ListAPIView):
    queryset = Challenge_code.objects.all()
    serializer_class = ChallengeSerializer

HTML-страница ChallengePage :

  <script defer src="https://unpkg.com/alpinejs@3.9.0/dist/cdn.min.js"></script>

<div style="text-align: center;" 
      x-data = "{tag: 'ALL', challenges: []}"
      x-init="challenges = await (await fetch('/challenge-list')).json()">
    {% for tag in tags %}
    <button style="text-align: center;"  dir="ltr" class="buttonTag buttonTag2"
    @click="tag = $el.textContent">   {{tag.name}}</button>
    {% endfor %}
    <button style="text-align: center;"  dir="ltr" class="buttonTag buttonTag2"
    @click="tag = $el.textContent">   ALL</button>
</div>


<div class="code_body">
    <div class="container_code">
        <!-- {% for challenge in challenges %} -->
        <template x-for="challenge in challenges.filter(f => tag === 'ALL || 'f.tags.includes(tag))"> 

        <div class="Box_code">  
            <p class="title_code"><bdi style="  color: #000;" x-text="challenge.title">
<!--                 {% for tag in challenge.tags.all %}
                {{tag}},
                {% endfor %} -->
                <!-- {{challenge.title}} -->
            </bdi>
            </p>
            <small x-text="challenge.tags.join(', ')">
<!--               {% for tag in challenge.tags.all %}
              {{tag}},
              {% endfor %} -->
            </small>
            <a href="{% url 'challenge' challenge.id %}"><button class="button1" style="vertical-align:middle"><span>الانضمام الى التحدي الآن  </span></button></a>
            <p class="name-user" x-text="challenge.auther.username">
              <!-- {{challenge.auther.username}} -->
            </p>
        </div>
      </template> 
      <!-- {% endfor %} -->

Вернуться на верх