Vue: ๋ฐฐ์—ด ๋ชจ๋ธ์ด ์žˆ๋Š” ์ฒดํฌ๋ฐ•์Šค

์— ๋งŒ๋“  2015๋…„ 07์›” 11์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

์ด์™€ ๊ฐ™์€ ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ?:

<script>
new Vue({
  data: {
    languages: ['english', 'japanese', 'chinese']
    myLanguages: ['english', 'chinese']
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language }}'
    v-model='myLanguages'>
</span>

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ •ํ™•ํžˆ ์–ด๋–ค ์ผ์ด ์ผ์–ด๋‚˜๊ธฐ๋ฅผ ์›ํ•˜์‹ญ๋‹ˆ๊นŒ?
์ฒดํฌ๋ฐ•์Šค ๋ชฉ๋ก๊ณผ ์ฒดํฌ๋œ ์ƒํƒœ๋ผ๋ฉด ์–ธ์–ด๋ฅผ ๋ฌธ์ž์—ด์ด ์•„๋‹Œ ๊ฐ์ฒด๋กœ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<script>
new Vue({
  data: {
    languages: [
        {name: 'english', checked:true},
        {name: 'japanese', checked:false},
        {name: 'chinese', checked:true}
    ]
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language.name }}'
    v-model='language.checked'>
</span>

๊ทธ๋Ÿฐ ๋‹ค์Œ ํ•„ํ„ฐ/๋งต์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ ํƒํ•œ ์–ธ์–ด์˜ ์ด๋ฆ„์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๊ทธ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๋Š” jsfiddle์ž…๋‹ˆ๋‹ค. http://jsfiddle.net/rmp135/v9vx9qyd/

๋ชจ๋“  3 ๋Œ“๊ธ€

์ •ํ™•ํžˆ ์–ด๋–ค ์ผ์ด ์ผ์–ด๋‚˜๊ธฐ๋ฅผ ์›ํ•˜์‹ญ๋‹ˆ๊นŒ?
์ฒดํฌ๋ฐ•์Šค ๋ชฉ๋ก๊ณผ ์ฒดํฌ๋œ ์ƒํƒœ๋ผ๋ฉด ์–ธ์–ด๋ฅผ ๋ฌธ์ž์—ด์ด ์•„๋‹Œ ๊ฐ์ฒด๋กœ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<script>
new Vue({
  data: {
    languages: [
        {name: 'english', checked:true},
        {name: 'japanese', checked:false},
        {name: 'chinese', checked:true}
    ]
  }
});
</script>
<span v-repeat='language : languages'>
  <input
    type='checkbox'
    value='{{ language.name }}'
    v-model='language.checked'>
</span>

๊ทธ๋Ÿฐ ๋‹ค์Œ ํ•„ํ„ฐ/๋งต์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ ํƒํ•œ ์–ธ์–ด์˜ ์ด๋ฆ„์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ๊ทธ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๋Š” jsfiddle์ž…๋‹ˆ๋‹ค. http://jsfiddle.net/rmp135/v9vx9qyd/

๋‚˜๋Š” ์œ ์Šค ์ผ€์ด์Šค๊ฐ€ ์ฒดํฌ ๋ฐ•์Šค๋ฅผ ๋น„์Šทํ•œ ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
์—ฌ๋Ÿฌ ์„ ํƒ ํ•ญ๋ชฉ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ๊ณผ ํ•จ๊ป˜ ์„ ํƒ ํ•ญ๋ชฉ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ผ์ข…์˜
์ฒดํฌ ๊ฐ€๋Šฅ ํ•ญ๋ชฉ์ด ์–ด๋ ˆ์ด์—์„œ ์˜ค๋Š” "์ ์šฉ๋˜๋Š” ๋ชจ๋“  ํ•ญ๋ชฉ ํ™•์ธ" ์‹œ๋‚˜๋ฆฌ์˜ค
๊ฐ€๋Šฅ์„ฑ์˜.
2015๋…„ 7์›” 12์ผ ์˜ค์ „ 9์‹œ 43๋ถ„์— "rmp135" [email protected]์ด ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

์ •ํ™•ํžˆ ์–ด๋–ค ์ผ์ด ์ผ์–ด๋‚˜๊ธฐ๋ฅผ ์›ํ•˜์‹ญ๋‹ˆ๊นŒ?
์ฒดํฌ๋ฐ•์Šค ๋ชฉ๋ก๊ณผ ์ฒดํฌ๋œ ์ƒํƒœ๋ผ๋ฉด
๋ฌธ์ž์—ด์ด ์•„๋‹Œ ๊ฐ์ฒด๋กœ์„œ์˜ ์–ธ์–ด.





๊ทธ๋Ÿฐ ๋‹ค์Œ ํ•„ํ„ฐ/๋งต์„ ์‚ฌ์šฉํ•˜์—ฌ ์„ ํƒํ•œ ์ด๋ฆ„์„ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์–ธ์–ด.

๋‹ค์Œ์€ ๊ทธ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๋Š” jsfiddle์ž…๋‹ˆ๋‹ค. http://jsfiddle.net/rmp135/v9vx9qyd/

โ€”
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ฑฐ๋‚˜ GitHub์—์„œ ํ™•์ธํ•˜์„ธ์š”.
https://github.com/yyx990803/vue/issues/1037#issuecomment -120721497.

์˜ค๋ž˜๋œ ์˜ˆ: http://jsfiddle.net/yyx990803/1onz2ho7/1/

core repo ๋Œ€์‹  vuejs/Discussion์—์„œ ์ด์™€ ๊ฐ™์€ ์งˆ๋ฌธ์„ ์—ฌ์‹ญ์‹œ์˜ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰