我们如何使用vue js表达式绑定复选框值?在下面,我有了filteroptions对象的数据,并且设法将值绑定到下面放置的#html1上。
我想知道的是如何将检查的值绑定到#html2?从#html1
的drpdown菜单中选择的值您可以在html2的过滤器上看到它不是动态的。
谢谢。
<div class="mh-filter-options">
<div class="filter-content">
<ul class="nav nav-pills">
<li class="dropdown" v-for="(opt, item) in filterOptions" :key="item">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false"> {{item}}</a>
<div class="dropdown-menu">
<a href="#" v-for="i in opt" :key="i.value">
<div class="inner">
<div class="checkbox">
<label class="filter-label-item">
<input type="checkbox" :data-prop="opt" :value=i.value />
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
<span>{{i.value}} <span class="badge badge-dark">{{i.count}}</span></span>
</label>
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="filtered-by">
<div class="filter-title">Filtered By: </div>
<div>
<div class="filter-item">
Year: <span> 2019 </span>
<a href="" title="Remove Filter"> <i class="fas fas- fa-times"></i></a>
</div>
<div class="filter-item">
Model: <span> Escape </span>
<a href="" title="Remove Filter"> <i class="fas fas- fa-times"></i></a>
</div>
<div class="filter-item">
Price range: <span> $5000-$10000 </span>
<a href="" title="Remove Filter"> <i class="fas fas- fa-times"></i></a>
</div>
</div>
<div class="clear-all-filter">
<a href="" title="Clear All Filter">Reset Filters</a>
</div>
</div>
setFilters() {
this.filterOptions = {
year: [{ value: '2019', checked: true, count: 10 }, { value: '2013', checked: false, count: 99 }, { value: '2017', checked: true, count: 10 }],
model: [{ value: 'Explorer', checked: true, count: 8 }, { value: 'Ram 1500', checked: false, count: 4 }, { value: 'Piloto', checked: false, count: 10 }],
priceRange: [{ value: '$10,000-$20,000', checked: false, count: 5 }, { value: '$20,000-$30,000', checked: false, count: 22 }, { value: '$30,000-$40,000', checked: false, count: 10 }],
mileage: [{ value: '1-1000', checked: false, count: 10 }, { value: '1001-2000', checked: false, count: 64 }, { value: '2001-3000', checked: false, count: 10 }],
bodyStyle: [{ value: 'Crew Cab Pickup', checked: false, count: 13 }, { value: 'Quad Cab Pickup', checked: false, count: 9 }, { value: 'Sport Utility', checked: true, count: 2 }]
}
},
答案 0 :(得分:0)
您应该绑定复选框with v-model,该复选框采用布尔值。因此,您的情况可能是SELECT
CASE col WHEN 1 THEN 'Cat'
WHEN 2 THEN 'Dog'
WHEN 3 THEN 'Horse' END AS animal
FROM yourTable;
我不确定我是否完全遵循您的代码,特别是setFilters()方法,但是Vue的原理是将所有页面状态封装在模型中,然后html2只是查看2值的模型值绑定到复选框。那有意义吗?