[Vuejs]-Display an object based on its value in Vue

by

0👍

✅

So I saw another stack overflow that solved this problem, it didn’t work properly before but I figured it out, here’s my new implementation.

computed: {
        displayResults: function() {
            return this.elections.filter(election => election.status === 'completed')
        }
    },

and the HTML

<div v-for="result in displayResults" :key="result.id">

0👍

I could not found displayResult data in your code, but generally if you want to show only some part of your data according to a special condition it is a good idea to use v-if in your template. So I changed some parts of your code as follows:

<template>
<section>

      <div v-for="election in elections" :key="election.status">
      <!-- ############################ -->
      <!-- using "v-if" inside "v-for" for detecting desired status -->
      <!-- ############################ -->
        <div v-if="election.status =='completed'">
          <div>
            <h3 class="font-bold">Election Results</h3>
          </div>

          <div>
            <div class="inline-flex space-x-2 align-middle">
              <h3 class="font-normal text-md">{{ election.title }}</h3>
              <span class="red-status uppercase">{{ election.status }}</span>
            </div>
            <div>
              <h3 class="font-normal text-md">{{ election.tier }}</h3>
              <p class="text-sm leading-loose">{{ election.date }}</p>
              <p class="text-sm leading-loose">
                {{ election.fromTime }} - {{ election.toTime }}
              </p>
              <p class="text-sm leading-loose">
                Number of Qualified Voters: {{ election.numQualified }}
              </p>
              <p class="text-sm leading-loose">
                Number of Voters: {{ election.numVotes }}
              </p>
            </div>
            <div class="space-y-4">
              <div
                  class="cards py-5"
                  v-for="candidates in election.candidates"
                  :key="candidates.name"
              >
                <div>
                  <h3>{{ candidates.name }}</h3>
                  <div class="w-full bg-yellow-50 rounded-full dark:bg-gray-700">
                    <div
                        class="bg-yellow-300 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
                    >
                      {{ candidates.votes }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

</section>
</template>

<script>
export default {
  name: "electionsCompo",
  data() {
    return {
      elections: [
        {
          id: 1,
          title: "State Elections",
          tier: "Alpha State",
          fromTime: "09:00 pm",
          toTime: "11:00 am",
          date: "2020-06-01",
          status: "completed",
          numQualified: "200",
          numVotes: "157",
          candidates: [
            {
              id: 1,
              name: "John",
              votes: "80%",
            },
            {
              id: 2,
              // changed dekname to name
              name: "Fred",
              votes: "30%",
            },
          ],
        },
        {
          id: 2,
          title: "City Elections",
          tier: "Beta City",
          fromTime: "09:00 pm",
          toTime: "11:00 am",
          date: "2020-06-01",
          status: "ongoing",
          numQualified: "120",
          numVotes: null,
          candidates: [
            {
              id: 1,
              name: "Chris",
            },
            {
              id: 2,
              name: "Josh",
            },
          ],
        },
        {
          id: 3,
          title: "President Elections",
          tier: "HQ",
          fromTime: "09:00 pm",
          toTime: "11:00 am",
          date: "2020-08-01",
          status: "pending",
          numQualified: "120",
          numVotes: null,
          candidates: [
            {
              id: 1,
              name: "Stone",
            },
            {
              id: 2,
              name: "Ben",
            },
          ],
        },
      ],
    };
  },
}
</script>

<style scoped>

</style>

You can use this idea in your real modal component to see only the results of desired "status" in the template.

Leave a comment