I am trying to display the content of an array object in a modal based on its id and the value of its status.
For example, there are three statuses available; completed, pending, and completed. Each election is recorded with its unique ID with the different status that applies. However, I noticed that all the elections appear as results instead of the particular object I want which is the one with the completed status.
Let's say:
export default {
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,
deckname: "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",
},
],
},
],
};
},
};
Now let's say we only want to display a particular ID with the status: "completed".
<Teleport to="body" v-for="election in displayResult" :key="election.status" :election="completed">
<modal :show="resultModal" @close="resultModal = false">
<template #header>
<h3 >Election Results</h3>
</template>
<template #body>
<div >
<h3 >{{ election.title }}</h3>
<span >{{ election.status }}</span>
</div>
<div>
<h3 >{{ election.tier }}</h3>
<p >{{ election.date }}</p>
<p >
{{ election.fromTime }} - {{ election.toTime }}
</p>
<p >
Number of Qualified Voters: {{ election.numQualified }}
</p>
<p >
Number of Voters: {{ election.numVotes }}
</p>
</div>
<div >
<div
v-for="candidates in election.candidates"
:key="candidates.name"
>
<div>
<h3>{{ candidates.name }}</h3>
<div >
<div
v-bind:style="voteWidth"
>
{{ candidates.votes }}
</div>
</div>
</div>
</div>
</div>
</template>
<template #footer>
<button @click="resultModal = false" >
Close
</button>
</template>
</modal>
</Teleport>
CodePudding user response：
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 >Election Results</h3>
</div>
<div>
<div >
<h3 >{{ election.title }}</h3>
<span >{{ election.status }}</span>
</div>
<div>
<h3 >{{ election.tier }}</h3>
<p >{{ election.date }}</p>
<p >
{{ election.fromTime }} - {{ election.toTime }}
</p>
<p >
Number of Qualified Voters: {{ election.numQualified }}
</p>
<p >
Number of Voters: {{ election.numVotes }}
</p>
</div>
<div >
<div
v-for="candidates in election.candidates"
:key="candidates.name"
>
<div>
<h3>{{ candidates.name }}</h3>
<div >
<div
>
{{ 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.
CodePudding user response：
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">