I am new to working with vue.js and I'm facing a challenge. My goal is to display images of NBA players based on the selected criteria using vue.js. For instance, if the Dunk contest champion is chosen, only images of Kobe and Jordan should be displayed. To determine which player's image to show, the data in an object with key-value pairs known as properties needs to be checked, containing specific conditions for each NBA player.
I have initialized a variable called checkstate set to false. The objective is to switch it to true once the condition is satisfied. I have implemented an onChange method for this purpose. While I am able to display the images and populate the selection element with data from the key-value objects, I am struggling to make the selection element and the images work together.
Any suggestions or solutions?
<head>
<style>
a.incognito{
display: none;
}
</style>
</head>
<body>
<h2>NBA players</h2>
<p>Explore the top NBA players</p>
<div id="app">
<select @change="onChange()" v-model="selected">
<option value="none">Select Filter</option>
<option v-for="property in properties" :value="property.filter"> {{property.filter}}</option>
</select>
<div class="portfolio">
<a v-for="player in players" :href="player.href"
:class="{incognito: checkstate}" :playername="player.name">
<img :src="player.src" alt="" >
</a>
</div>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
let app = Vue.createApp({
data() {
return {
players: [{ name: "Mike", href: "https://en.wikipedia.org/wiki/Michael_Jordan", src: "/Test/Michael_Jordan_in_2014.jpg" },
{ name: "Kobe", href: "https://en.wikipedia.org/wiki/Kobe_Bryant", src: "/Test/Kobe_Bryant_2014.jpg" },
{ name: "Lebron", href: "https://en.wikipedia.org/wiki/LeBron_James", src: "/Test/LeBron_James_-_51959723161_(cropped).jpg" },
{ name: "Kd", href: "https://en.wikipedia.org/wiki/Kevin_Durant", src: "/Test/Kevin_Durant_(Wizards_v._Warriors,_1-24-2019)_(cropped).jpg" },
],
properties: [{filter: "Guard position",Mike:true,Kobe:true,Kd:false,LeBron:false},
{ filter: "Foward position",Mike:false,Kobe:false,Kd:true,LeBron:true},
{ filter: "Multiple Championships",Mike:true,Kobe:true,Kd:true,LeBron:true},
{ filter: "Multiple MVP's",Mike:true,Kobe:false,Kd:false,LeBron:true},
{ filter: "Over 6'8",Mike:false,Kobe:false,Kd:true,LeBron:true},
{ filter: "Dunk contest champion",Mike:true,Kobe:true,Kd:false,LeBron:false}],
selected: 'none',
checkstate:false,
}
}, methods: {
onChange() {
const attr = this.properties.find((item) => item.filter === this.selected)
checkstate=this.properties[this.playername]
},
},
props:['playername']
,
})
app.mount('#app')
</script>
</body>