Output image depending on selection vue.js

Issue

I am relatively new to vue.js and I am having a bit of difficulty. I want to show the images of NBA players depending on the selection using vue.js. For example: If the Dunk contest champion is selected: the image of only Kobe and Jordan should show up. To know if it should output the image of the player, it has to check the data in an object with key-values called properties, which contain conditions and every NBA player.

I created a variable called checksate initially set to false. I want it to turn true when the condition is met. I created an onChange method for that purpose. I am able to show the images and fill up the selection element by taking the data from the key-value objects. However, I cannot make the selection element and the images work together.

Any ideas?

<head>
    <style>
     a.incognito{
    display: none;
        }
        </style>
</head>
<body>
        <h2>NBA players</h2>
        <p>A selection of the best 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>

Solution

<!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Website</title>
     <style>
         a.incognito {
             display: none;
         }
     </style>
 </head>
 
 <body>
     <h2>NBA players</h2>
     <p>A selection of the best NBA players</p>
 
     <div id="app">
         <select v-model="selected" >
             <option value="none">Select filter</option>
             <option v-for="property in properties" :value="property"> {{property}}</option>
         </select>
         
         <div >   
             <a  v-for="player in players"  :href="player.href" :class="{incognito: !player[selected]}" >
                 <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: "Micheal Jordan", ID: "0", href: "https://en.wikipedia.org/wiki/Michael_Jordan", src: "/Test/Michael_Jordan_in_2014.jpg", GuardPosition: true, ForwardPosition: false, MultipleChampionships: true, MultipleMVP: true, Over6foot8: false, DunkContestChampion: true },
                     { name: "Kobe Bryant", ID: "1", href: "https://en.wikipedia.org/wiki/Kobe_Bryant", src: "/Test/Kobe_Bryant_2014.jpg", GuardPosition: true, ForwardPosition: false, MultipleChampionships: true, MultipleMVP: false, Over6foot8: false, DunkContestChampion: true },
                     { name: "Lebron James", ID: "2", href: "https://en.wikipedia.org/wiki/LeBron_James", src: "/Test/LeBron_James_-_51959723161_(cropped).jpg", GuardPosition: false, ForwardPosition: true, MultipleChampionships: true, MultipleMVP: true, Over6foot8: true, DunkContestChampion: false },
                     { name: "Kevin Durant", ID: "3", href: "https://en.wikipedia.org/wiki/Kevin_Durant", src: "/Test/Kevin_Durant_(Wizards_v._Warriors,_1-24-2019)_(cropped).jpg", GuardPosition: false, ForwardPosition: true, MultipleChampionships: true, MultipleMVP: false, Over6foot8: true, DunkContestChampion: false },
                     ],
 
                   properties: ["GuardPosition", "ForwardPosition", "MultipleChampionships", "MultipleMVP", "Over6foot8", "DunkContestChampion"],
 
                     selected: 'none',
                     checkstate: false,
                 }
             }
         })
         app.mount('#app')
 
     </script>
 
 </body>
 
 </html>

Answered By – Anthony Sanogo

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.