![](/img/trans.png)
[英]How to hide all buttons except clicked one if they are listed in v-for?
[英]V-for clicks all buttons instead of just one
我是Vue.js的新手。 我正在嘗試基於數組從v-for(正確渲染)渲染復選框。
然后,我嘗試在每個復選框旁邊呈現一個按鈕,該按鈕將基於所選索引打開多選。 但是,每當我單擊渲染按鈕時,它都會打開所有復選框按鈕的多重選擇。
HTML:
<div>
<label class='label'>countrys:* </label><br><br>
<div
v-for="(country, index) in countries"
class="label"
style="display: inline-block;">
<input
type='checkbox'
value="country"> 
{{country.geos}}        
<img
class='addIcon'
v-bind="country"
:key="country.index"
style="width: 26px;height: 20px;margin-right: 8px;margin-top: px;margin-left: -25px;margin-bottom:-5px"
src='../../images/createScreen/addClient@2x.png'
@click="makeMarketsActive($event, index)">
<select multiple v-if="!isHidden">
<option
v-for="(market) in country.markets"
v-bind="country">
{{ market }}
</option>
</select>
</div>
</div>
JS:
export default {
name: "Update",
components: {
},
data() {
return {
countries:[
{
"index":0,
"geos":"America",
"markets":['a','b','c','d']
},
{
"index":1,
"geos":"Canada",
"markets":['a','b']
},
"index":2,
"geos":"Africa",
"markets":['x','z']
}
],
isHidden:true
}
},
makeMarketsActive(event, index) {
this.isHidden = !this.isHidden;
}
預期結果:單擊為每個復選框渲染的圖像時,我只想查看每個地理位置而不是全部的市場。
您也不需要額外的功能
HTML
<div id="app">
<label class='label'>countries:* </label><br><br>
<div v-for="(country, index) in countries" class="label" style="display: inline-block;">
<input type='checkbox' value="country">{{country.geos}}
<img class='addIcon' v-bind="country" :key="country.index" style="margin-right: 8px;margin-top: px;margin-left: -25px;margin-bottom:-5px" src='https://via.placeholder.com/26x20' v-on:click="country.isVisible = !country.isVisible">
<select multiple v-show="country.isVisible">
<option v-for="(market) in country.markets" v-bind="country" >{{ market }}</option>
</select>
</div>
</div>
JS
new Vue({
el: '#app',
data: {
countries: [{
"index": 0,
"geos": "America",
"markets": ['a', 'b', 'c', 'd'],
"isVisible": false
},
{
"index": 1,
"geos": "Canada",
"markets": ['a', 'b'],
"isVisible": false
}, {
"index": 2,
"geos": "Africa",
"markets": ['x', 'z'],
"isVisible": false
}
]
}
})
首先,如注釋中所述,您正在通過常規屬性isHidden
處理每個按鈕狀態。 因此,您需要將此屬性添加到數據數組:
new Vue({ el: "#app", data: { countries:[ { "index":0, "geos":"America", "markets":['a','b','c','d'], "isHidden":true }, { "index":1, "geos":"Canada", "markets":['a','b'], "isHidden":true }, {"index":2, "geos":"Africa", "markets":['x','z'], "isHidden":true } ] }, methods: { makeMarketsActive(event, index) { this.countries[index].isHidden = !this.countries[index].isHidden; } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <label class='label'>countrys:* </label><br><br> <div v-for="(country, index) in countries" class="label" style="display: inline-block;"> <input type='checkbox' value="country"> {{country.geos}}         <img class='addIcon' v-bind="country" :key="country.index" style="width: 26px;height: 20px;margin-right: 8px;margin-top: px;margin-left: -25px;margin-bottom:-5px" src='../../images/createScreen/addClient@2x.png' @click="makeMarketsActive($event, index)"> <select multiple v-if="!country.isHidden"> <option v-for="(market) in country.markets" v-bind="country" > {{ market }} </option> </select> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.