Vue JS 체크박스를 바인드하는 방법?

Vue JS 체크박스를 바인드하는 방법?

vue js expression을 사용하여 체크박스의 값을 바인드하려면 어떻게 해야 합니까?아래에 filter options 객체의 데이터를 나타냅니다.또, 그 값을 아래 #html1에 바인드 할 수 있습니다.

내가 알고 싶은 것은 체크된 값을 #html1의 drpdown 메뉴에서 선택한 값인 #html2에 바인드하는 방법입니다.

html2의 필터에서 볼 수 있듯이 다이내믹하지 않습니다.

감사합니다.

html1

<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>

html 2

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

부울 값을 사용하는 v-model로 확인란을 바인딩해야 합니다.그래서 당신의 경우엔<input type='checkbox' v-model='i.checked'>

당신의 코드, 특히 setFilters() 메서드를 완전히 따르고 있는지는 모르겠습니다만, Vue의 주된 목적은 모든 페이지 상태를 모델에 캡슐화하고 html2는 체크박스에 쌍방향으로 바인드된 모델 값을 보는 것입니다.이해 하셨나요?

언급URL : https://stackoverflow.com/questions/58618305/vue-js-how-to-bind-checkboxes