루프에서 For 확인란을 렌더링하고 Vue JS에서 해당 값을 바인딩합니다.

루프에서 For 확인란을 렌더링하고 Vue JS에서 해당 값을 바인딩합니다.

둘 이상의 확인란을 조합하여 데이터베이스에서 데이터를 필터링하는 필터를 만들려고 합니다.이런 거.

랜딩 페이지에서 get 변수와 함께 속성이 나열된 이 페이지로 리디렉션됩니다.제 경우, 이 요청에는 3개의 get 변수가 있습니다.$location, $type 및 $price.이제 $location 변수에 있는 위치가 무엇이든 $location과 같은 값을 가진 체크박스를 켜야 합니다.예를 들어, 제 경우 $location == candolim이면 candolim 체크박스는 자동으로 켜져야 합니다.

그리고 그것을 사용하여 AJAX 요청을 서버로 전송하여 속성을 가져옵니다.지금은 Laravel과 Vue Js를 사용하고 있습니다.요청의 악시오.

처음에 랜딩 페이지 검색 필터에서 여기로 리다이렉트 했을 때 요청에는 $locaton, $type 및 $price라는 변수가 있습니다.여기서는 Vue js를 사용하고 있습니다. 페이지가 로드되고 Vue 인스턴스가 생성될 때마다 데이터베이스에서 사용 가능한 모든 위치를 가져와 여기에 확인란과 함께 표시합니다.그 표시는 다음과 같습니다.

   <p>SEARCH BY LOCATION</p>
<span v-for="item in allLocations">
<input type="checkbox"> <span class="checkbox-label"> @{{item.location}} </span> <br>
</span>
<hr>

이제 Vue를 사용하여 클릭하는 모든 체크박스의 값을 얻는 방법은 무엇입니까?그리고 get request를 사용하여 랜딩 페이지에서 받는 $location과 같은 값을 가진 체크박스를 켜려면 어떻게 해야 하나요?

여러분, 이 질문이 굉장히 혼란스럽다는 것을 알지만 이렇게 설명하면 제가 원하는 것을 설명할 수 있습니다.제발 도와주세요.감사합니다.

의 배열 필드에서 선택하는 모든 값만 유지하면 됩니다.data,예.selectedLocations각 체크박스에 대해value체크박스를 켜고 동일한 값을 사용해야 하는 해당 값에 대한 속성selectedLocations처럼v-model각 체크박스에 대해서요.

이 가이드의 "폼 입력 바인딩 - 확인란" 섹션에 설명되어 있습니다.

데모

new Vue({
  el: '#app',
  data: {
    allLocations: [
      { location: 'candolim' },
      { location: 'baga' },
    ],
    selectedLocations: [ 'candolim' ]     // you can set this from your $location (but make sure selectedLocations is an array)
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id='app'>
  <p>SEARCH BY LOCATION</p>
  <span v-for="item in allLocations">
    <input type="checkbox" :value="item.location" v-model="selectedLocations"> <span class="checkbox-label"> {{item.location}} </span> <br>
  </span>
  <hr>
  <span>Selected locations: {{ selectedLocations }}</span>
</div>

언급URL : https://stackoverflow.com/questions/50050187/render-checkboxes-in-for-in-loop-and-bind-their-values-in-vue-js