Vue: v-if๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ธฐ๋Šฅ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๋น„ ๊ธฐ๋Šฅ ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๊ต์ฒดํ•ด๋„ v-data- * ์†์„ฑ์ด ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

๋ฒ„์ „

2.6.11

๋ณต์ œ ๋งํฌ

https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark

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

์ฒดํฌ ๋ฐ•์Šค๋ฅผ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.

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

ํŒŒ๋ž€์ƒ‰ ๋ฐฐ๊ฒฝ์ƒ‰์œผ๋กœ "BLUE BOX"๋ผ๊ณ  ํ‘œ์‹œ๋˜์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

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

๋ฐฐ๊ฒฝ์ƒ‰์ด์—†๋Š” "BLUE BOX"๋ผ๊ณ ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.


์ด ๋ฌธ์ œ๋Š” ๋ฐ์ดํ„ฐ -v- * ์†์„ฑ์ด ๊ต์ฒด ๋  ๋•Œ blue_block div์— ๋Œ€ํ•ด ์žฌ์„ค์ •๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋Šฅ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ํ•˜์œ„ div์˜ data-v- * ์†์„ฑ์„ ์—ฌ์ „ํžˆ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ CSS ํด๋ž˜์Šค ์Šคํƒ€์ผ์ด ์ ์šฉ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

https://imgur.com/a/gukDePJ

๊ธฐ๋Šฅ์  ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๋‹ค๋ฅธ ๊ฒƒ์œผ๋กœ ๊ต์ฒดํ•˜๋Š” ๊ฒƒ์ด ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ : ๋” ๋ณต์žกํ•œ ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๊ต์ฒดํ•˜๊ธฐ ์ „์— ๊ฐ„๋‹จํ•œ ๋กœ๋”ฉ ๋ฐ” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ‘œ์‹œ ํ•  ๋•Œ.

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

Vue๊ฐ€ ์—…๋ฐ์ดํŠธ ์ค‘์— ๋…ธ๋“œ๋ฅผ ์žฌํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ด€๋ จ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ key ๋ฅผ ๊ตฌ์„ฑ ์š”์†Œ์™€ div ๋ชจ๋‘์— ์ถ”๊ฐ€ํ•˜๋ฉด ์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

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

Vue๊ฐ€ ์—…๋ฐ์ดํŠธ ์ค‘์— ๋…ธ๋“œ๋ฅผ ์žฌํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ด€๋ จ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์œผ๋กœ key ๋ฅผ ๊ตฌ์„ฑ ์š”์†Œ์™€ div ๋ชจ๋‘์— ์ถ”๊ฐ€ํ•˜๋ฉด ์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘์ด ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

https://github.com/vuejs/vue/issues/10416 ๊ณผ ๊ด€๋ จ์ด์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ…Œ์ŠคํŠธ

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