v-for가 개체의 속성과 함께 사용되는 경우 확인란과 함께 v-model 사용

v-for가 개체의 속성과 함께 사용되는 경우 확인란과 함께 v-model 사용

「」를 사용합니다.v-model체크박스를 켜면는 오브젝트 배열과 함께 사용할 수 있습니다.

new Vue({
  el: '#example',
  data: {
    names: [
      { name: 'jack', checked: true },
      { name: 'john', checked: false },
      { name: 'mike', checked: false }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  <div v-for="(item, index) in names" :key="index">
  <input type="checkbox" :id="item.name" v-model="item.checked">
  <label :for="item.name">{{ item.name }} {{ item.checked }}</label>
  </div>
</div>

「」를 사용합니다.v-model체크박스를 켜면가 오브젝트 속성과 함께 사용되었을 때 작동하지 않습니다.

new Vue({
  el: '#example',
  data: {
    names: {
      jack: true,
      john: false,
      mike: false
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  Does not work with v-for:
  <div v-for="(value, key, index) in names" :key="index">
  <input type="checkbox" :id="key" v-model="value">
  <label :for="key">{{ key }} {{ value }}</label>
  </div>
  But it does work without v-for:
  <br>
  <input type="checkbox" id="jack" v-model="names.jack">
  <label for="jack">jack</label>
  <br>
  <input type="checkbox" id="john" v-model="names.john">
  <label for="john">john</label>
  <br>
  <input type="checkbox" id="mike" v-model="names.mike">
  <label for="mike">mike</label>
  <br>
  And it even changes the checkbox above!
</div>

,, 을, 을, 용을 v-model체크박스를 켜면!가 없는 객체의 속성으로 동작합니다.

왜런그 일일?떻게게 하면 ?? ???는 꼭 나 really really가 필요하다.v-for오브젝트의 속성을 조작할 수 있습니다.

EDIT: 체크된 값의 배열은 필요 없습니다.오브젝트 속성의 정확한 값을 변경해야 합니다.

" "v-model="names[key]"동작합니다. Dynamic v-model 지시문을 참조하십시오.

new Vue({
  el: '#example',
  data: {
    names: {
      jack: true,
      john: false,
      mike: false
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  Does not work with v-for:
  <div v-for="(value, key, index) in names" :key="index">
    <input type="checkbox" :id="key" v-model="names[key]">
    <label :for="key">{{ key }} {{ value }}</label>
  </div>
  But it does work without v-for:
  <br>
  <input type="checkbox" id="jack" v-model="names.jack">
  <label for="jack">jack</label>
  <br>
  <input type="checkbox" id="john" v-model="names.john">
  <label for="john">john</label>
  <br>
  <input type="checkbox" id="mike" v-model="names.mike">
  <label for="mike">mike</label>
  <br>
  And it even changes the checkbox above!
</div>

언급URL : https://stackoverflow.com/questions/52691527/use-v-model-with-a-checkbox-when-v-for-is-used-with-properties-of-an-object