我对vue.js比较陌生，我有一点困难。我想显示NBA球员的图像取决于使用vue.js的选择。例如:如果扣篮大赛冠军被选中:只有科比和乔丹的形象应该出现。要知道它是否应该输出球员的图像，它必须检查一个名为properties的键值对象中的数据，该对象包含条件和每个NBA球员。
我创建了一个名为checksafe的变量，初始设置为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>
<!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>