vue.for에서 html 요소를 사용하지 않음v-for

vue.for에서 html 요소를 사용하지 않음v-for

저는 Vue.js에 처음 왔어요.

입력 요소 연습 데모를 준비하고 있습니다. 코드입니다.

HTML

<div id="inputDiv">
  <form action="">
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <input type="email" v-model="email">
    <div>
      <input type="radio" :name="gender" v-model="gender" value="male">Male
      <input type="radio" :name="gender" v-model="gender" value="female">Female
    </div>
    <textarea v-model="address" id="" cols="30" rows="10"></textarea>
    <br>
    <div v-for="hobby in hobbies">
      <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">{{hobby}}
    </div>
  </form>
</div>

대본

const inputApp = new Vue({
  el: '#inputDiv',
  data: {
    first_name: '',
    last_name: '',
    email: '',
    gender: 'male',
    address: '',
    userHobbies:[],
    hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
  }
})

여기 보시는 바와 같이, 부모님과 반복해야 하는 라벨이 있는 Hobby를 표시하기 위해,

div를 추가하는 것은 내가 원하는 것이 아니다. 만약 내가 원한다면v-for다음과 같은 입력 요소에 있습니다.

<input 
  type="checkbox" 
  v-for="hobby in hobbies" 
  v-model="userHobbies" 
  v-bind:value="hobby"
>{{hobby}}

thin it through 예외 [Vue warn] : 속성 또는 메서드 "hobby"가 인스턴스에서 정의되지 않았습니다.

HTML 요소를 사용하지 않고 v-for over object 요소를 사용할 수 있는 대안이 있습니까?

포장을 하다template태그는 템플릿 태그로 최종 렌더링된HTML에는 표시되지 않습니다.

<template v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">{{hobby}}
</template>

또는 마크업 의미를 개선하고 라벨 태그를 사용하는 것이 좋습니다.

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> {{hobby}}
</label>

템플릿이 DOM에 렌더링되지 않으므로 div 내부에 템플릿을 추가할 수 있습니다.

  <div id="inputDiv">
    <form action>
      <input type="text" v-model="first_name">
      <input type="text" v-model="last_name">
      <input type="email" v-model="email">
      <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
      </div>
      <textarea v-model="address" id cols="30" rows="10"></textarea>
      <br>
      <template v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">
        {{hobby}}
      </template>
    </form>
  </div>

문제는 스트링 보간은{{hobby}}태그가 루프 밖에 있는 경우, 그 때문에 에러가 표시됩니다.이 경우, 태그는 무엇인가 안에 랩 되어 있을 필요가 있습니다.

div를 특별히 사용하지 않으려는 경우 대신 라벨을 선택하면 됩니다.이 시나리오에서는 훨씬 자연스러우며, 사용자가 라벨을 클릭하면 체크박스가 자동으로 선택됩니다.

<label v-for="hobby in hobbies">
    <input type="checkbox" v-model="userHobbies" v-bind:value="hobby"> {{hobby}} <br>
</label>

new Vue({
  el: '#inputDiv',
  data: {
    first_name: '',
    last_name: '',
    email: '',
    gender: 'male',
    address: '',
    userHobbies:[],
    hobbies: ['Reading', 'Cricket', 'Cycling', 'Hiking']
  }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="inputDiv">
<form action="">
    <input type="text" v-model="first_name">
    <input type="text" v-model="last_name">
    <input type="email" v-model="email">
    <div>
        <input type="radio" :name="gender" v-model="gender" value="male">Male
        <input type="radio" :name="gender" v-model="gender" value="female">Female
    </div>
    <textarea v-model="address" id="" cols="30" rows="10"></textarea>
    <br>
    <label v-for="hobby in hobbies">
        <input type="checkbox" v-model="userHobbies" v-bind:value="hobby">{{hobby}}
        <br>
    </label>
</form>
{{ userHobbies | json }}
</div>

언급URL : https://stackoverflow.com/questions/55865058/v-for-without-using-html-element-in-vue-js