Vue: v-model์ด false์ธ ๊ฒฝ์šฐ ํ™•์ธ๋ž€์ด ์„ ํƒ๋จ์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

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

v-model์ด ์—…๋ฐ์ดํŠธ๋˜๊ธฐ ์ „์— @click ์ด ์‹คํ–‰๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด ๊ฒฝ๋กœ๋ฅผ ์‹œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค(์˜ˆ: http://jsfiddle.net/5sH6A/308/ ).
๊ทธ๋ž˜์„œ ๊ทธ ๊ฐ€์น˜๊ฐ€ ๋ฌด์—‡์ธ์ง€ ์•Œ์ง€ ๋ชปํ–ˆ๋‹ค. ๋‚˜๋Š” watch: function์—์„œ ๋‚ด ๋…ผ๋ฆฌ๋ฅผ ์‹œ๋„ํ•  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ–ˆ์ง€๋งŒ ์•„๋ž˜ ๋ฌธ์ œ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค.

Vue.js ๋ฒ„์ „

1.0.16

์žฌ์ƒ์‚ฐ ๋งํฌ

http://jsfiddle.net/5sH6A/303/

์žฌํ˜„ ๋‹จ๊ณ„

ํ™•์ธ๋ž€์„ ํด๋ฆญํ•˜๊ณ  ์ทจ์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค.

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

์ฒดํฌ๋ฐ•์Šค๋Š” ๋น„์–ด ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

๋ฐ”์ธ๋”ฉ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ false์ธ ๋™์•ˆ ํ™•์ธ๋ž€์ด ์„ ํƒ๋จ์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

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

์ด ํŒŒํ‹ฐ์— ๋งค์šฐ ๋Šฆ์—ˆ์ง€๋งŒ ๋ช‡ ๋…„์ด ์ง€๋‚œ ํ›„์—๋„ ์—ฌ์ „ํžˆ ๋‚˜์—๊ฒŒ ์ค‘์š”ํ•œ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ๋‚ด ์†”๋ฃจ์…˜:
v-model๊ณผ ํ•จ๊ป˜ ์ฒดํฌ๋ฐ•์Šค ์ž…๋ ฅ์„ ์‚ฌ์šฉํ•  ๋•Œ onchange @change ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค. IE์™€ ํ•ฉ๋ฆฌ์ ์ธ ๋ธŒ๋ผ์šฐ์ € ๋ชจ๋‘์—์„œ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์ด์ƒํ•˜๊ฒŒ๋„ v-model ์ฒดํฌ๋ฐ•์Šค์™€ @click ์„ ์‚ฌ์šฉํ•˜๋ฉด v-model ์†์„ฑ์˜ ๊ฐ’(์˜ˆ: "flgChecked")์ด Chrome/Firefox ํด๋ฆญ ํ•ธ๋“ค๋Ÿฌ์—์„œ ๋ฐ˜์ „๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์ผœ์ง ์œ„์น˜๋กœ ํด๋ฆญํ•˜๋ฉด false๊ฐ€ ๋˜๊ณ  ๊บผ์ง ์œ„์น˜๋กœ ํด๋ฆญํ•˜๋ฉด true๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ -- ๊ฑฐ๊พธ๋กœ. ๊ทธ๋Ÿฌ๋‚˜ IE๋Š” ์‹ค์ œ๋กœ "์˜ฌ๋ฐ”๋ฅด๊ฒŒ" ๋ณด๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ . . . @change๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์•„๋‹ˆ๋ฉด ๋‚ด๊ฐ€ ๋ญ”๊ฐ€๋ฅผ ๋†“์น˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ผ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์€ ํ˜ธํ™˜์„ฑ์— ๊ด€ํ•œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
Windows 10์˜ Edge 12 ๋ฐ IE11์—์„œ๋Š” ์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ chrome 49.0.2623.110์—์„œ๋Š” ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ ์˜คํ”ˆ ์ˆ˜์„ธ ๋ฆฝ์—์„œ ํŒŒ์ด์–ดํญ์Šค 41๋กœ ๊นจ์ง‘๋‹ˆ๋‹ค.

๊ฐ์‹œ์ž ๋‚ด๋ถ€์—์„œ ๊ฐ™์€ ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ๊ฒƒ์€ ํ•ญ์ƒ ๋‚˜์œ ์ƒ๊ฐ์ž…๋‹ˆ๋‹ค...

์ด๊ฒƒ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฐ€์žฅ ์‰ฌ์šด ๋ฐฉ๋ฒ•์€ ๋‹จ์ˆœํžˆ v-model ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์–ด์จŒ๋“  ๊ฐ’์„ ์ง์ ‘ ์ œ์–ดํ•˜๋ ค๊ณ ํ•ฉ๋‹ˆ๋‹ค. http://jsfiddle.net/yyx990803/5sH6A/310/

์ด ํŒŒํ‹ฐ์— ๋งค์šฐ ๋Šฆ์—ˆ์ง€๋งŒ ๋ช‡ ๋…„์ด ์ง€๋‚œ ํ›„์—๋„ ์—ฌ์ „ํžˆ ๋‚˜์—๊ฒŒ ์ค‘์š”ํ•œ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ๋‚ด ์†”๋ฃจ์…˜:
v-model๊ณผ ํ•จ๊ป˜ ์ฒดํฌ๋ฐ•์Šค ์ž…๋ ฅ์„ ์‚ฌ์šฉํ•  ๋•Œ onchange @change ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค. IE์™€ ํ•ฉ๋ฆฌ์ ์ธ ๋ธŒ๋ผ์šฐ์ € ๋ชจ๋‘์—์„œ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

์ด์ƒํ•˜๊ฒŒ๋„ v-model ์ฒดํฌ๋ฐ•์Šค์™€ @click ์„ ์‚ฌ์šฉํ•˜๋ฉด v-model ์†์„ฑ์˜ ๊ฐ’(์˜ˆ: "flgChecked")์ด Chrome/Firefox ํด๋ฆญ ํ•ธ๋“ค๋Ÿฌ์—์„œ ๋ฐ˜์ „๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์ฒดํฌ๋ฐ•์Šค๋ฅผ ์ผœ์ง ์œ„์น˜๋กœ ํด๋ฆญํ•˜๋ฉด false๊ฐ€ ๋˜๊ณ  ๊บผ์ง ์œ„์น˜๋กœ ํด๋ฆญํ•˜๋ฉด true๊ฐ€ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ -- ๊ฑฐ๊พธ๋กœ. ๊ทธ๋Ÿฌ๋‚˜ IE๋Š” ์‹ค์ œ๋กœ "์˜ฌ๋ฐ”๋ฅด๊ฒŒ" ๋ณด๊ณ ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ . . . @change๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

์•„๋‹ˆ๋ฉด ๋‚ด๊ฐ€ ๋ญ”๊ฐ€๋ฅผ ๋†“์น˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ผ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

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