根据选择输出图像 vue.js

Question

我是 vue.js 的新手，遇到了一些困难。我想根据使用 vue.js 的选择显示 NBA 球员的图像。例如：如果选择扣篮大赛冠军：只有科比和乔丹的形象出现。要知道它是否应该输出球员的图像，它必须检查一个对象中的数据，该对象具有称为属性的键值，其中包含条件和每个 NBA 球员。

我创建了一个名为 checksate 的变量，最初设置为 false。我希望它在满足条件时变为真。为此，我创建了一个 onChange 方法。我能够通过从键值对象中获取数据来显示图像并填充选择元素。但是，我无法使选择元素和图像一起工作。

有什么想法吗？

<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>

Answer 1

<!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>

根据选择输出图像 vue.js

Output image depending on selection vue.js

html

javascript

css

vue.js