How can when i click radio button and label show corresponding value in Vuejs 2

user_13579512 0
Viewed 68

I have a piece of data like this and I want to filter it to display by value of radio button. My Data

 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'}]

I need to filter it by job genres and this is my interface:

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>
vuejs2 vuejs3 vue-component vue.js javascript
1 Answers

You can set v-model on your radio inputs and use computed property to filter data:

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>

user_119891890
Related