如何当我点击单选按钮和标签显示相应的值在Vuejs 2

Question

我有一个这样的数据，我想过滤它，按单选按钮的值显示。我的数据

data(){
return{
checks:['Developer','Tester', 'Designer', 'Support',],
infojobs:[{
genres: 'Developer',
position:'Senior Java Engineer, Big Data',
exprerience:'3-5 Years',
salary:'',
headequarters:'',
content1:'A',
content2:'B',
content3:'C'}]

我需要按工作类型过滤它，这是我的界面:

jobs.vue

<div class="job-filter">
<h3>Filter</h3>
<div class="radio-group" id="group-filter" :class="{ 'display-block': this.display }">
<div class="radio-check pdt-10 ">
<input type="radio"  name="fav_language" value="">
                    <label for="">Tất cả</label><br>
</div>
<div class="radio-check" v-for="(check, index) in checks" :key="index">
<input type="radio"  name="fav_language" value="" >
                    <label for="">{{check}}</label><br>
</div>

</div>
</div>
<div class="search">
<div class="search-top flex-wrap">
<h5>22 tin tuyển dụng</h5>
<div class="search-input">
<input type="search" placeholder="Nhập từ khóa để tìm kiếm">
<button><img src="../assets/recruit/search.svg" alt=""></button>
</div>
</div>
<div class="job-item" v-for="(item, index) in infojobs" :key="index">
<h3 class="mleft-27">{{item.position}}</h3>
<div class="job-info flex-wrap">
<div class="job-info-left pleft-27 flex-wrap">
<div>
<img src="../assets/recruit/years.svg" alt="">
<b>{{item.exprerience}}</b>
</div>
<div>
<img src="../assets/recruit/luong.svg" alt="">
<b>{{item.salary}}</b>
</div>
<div>
<img src="../assets/recruit/diadiem.svg" alt="">
<b>{{item.headequarters}}</b>
</div>
</div>
<div>
<h6>2 ngày trước</h6>
</div>
</div>
<div class="info-job flex-wrap">
<div class="list-info-job">
<ul>
<li>{{item.content1}}</li>
<li>{{item.content2}}</li>
<li>{{item.content3}}</li>
</ul>
</div>
<a href="/detail">
<button class="btn-detail" >Xem chi tiết</button>
</a>
</div>

Answer 1

你可以设置v-model在你的无线电输入和使用计算属性来过滤数据:

new Vue({
el: "#demo",
data() {
return {
checks: ['Developer','Tester', 'Designer', 'Support'],
infojobs: [{genres: 'Developer', position:'Senior Java Engineer, Big Data',      exprerience:'3-5 Years', salary:'', headequarters:'', content1:'A', content2:'B',   content3:'C'}],
selected: null,
display: ''
}
},
computed: {
filtered() {
if (this.selected) return this.infojobs.filter(i => i.genres === this.selected)
return this.infojobs
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="job-filter">
<h3>Filter</h3>
<div class="radio-group" id="group-filter" :class="{ 'display-block': this.display }">
<div class="radio-check pdt-10 ">
<input type="radio"  name="fav_language" v-model="selected" value="">
<label for="">Tất cả</label><br>
</div>
<div class="radio-check" v-for="(check, index) in checks" :key="index">
<input type="radio" :id="index" :value="check"  name="fav_language" v-model="selected" >
<label for="">{{check}}</label><br>
</div>
{{selected}}
</div>
</div>
<div class="search">
<div class="search-top flex-wrap">
<h5>22 tin tuyển dụng</h5>
<div class="search-input">
<input type="search" placeholder="Nhập từ khóa để tìm kiếm">
<button><img src="../assets/recruit/search.svg" alt=""></button>
</div>
</div>
<div class="job-item" v-for="(item, index) in filtered" :key="index">
<h3 class="mleft-27">{{item.position}}</h3>
<div class="job-info flex-wrap">
<div class="job-info-left pleft-27 flex-wrap">
<div>
<img src="../assets/recruit/years.svg" alt="">
<b>{{item.exprerience}}</b>
</div>
<div>
<img src="../assets/recruit/luong.svg" alt="">
<b>{{item.salary}}</b>
</div>
<div>
<img src="../assets/recruit/diadiem.svg" alt="">
<b>{{item.headequarters}}</b>
</div>
</div>
<div>
<h6>2 ngày trước</h6>
</div>
</div>
<div class="info-job flex-wrap">
<div class="list-info-job">
<ul>
<li>{{item.content1}}</li>
<li>{{item.content2}}</li>
<li>{{item.content3}}</li>
</ul>
</div>
<a href="/detail">
<button class="btn-detail" >Xem chi tiết</button>
</a>
</div>
</div>
</div>
</div>