點燈坊

失くすものさえない今が強くなるチャンスよ

使用 v-for 動態加入 Component

Sam Xiao's Avatar 2021-04-30

實務上有時候 UI 不見的一開始就有全部 Component，而是 User 按下 Button 才會動態加入，在 Vue 3 只要使用簡單的 v-for 就可完成。

Version

Vue 3.0.11

Composition API

add000

  • 按下 Add component 會動態新增 textbox，且動態綁定到 state
  • 按下 Remove component 會動態刪除 textbox，且動態刪除 state
<template lang='pug'>
ul
  li(v-for='i in count')
    input(v-model='names[i-1]')/ {{ names[i-i] }}

button(@click='onAdd') Add component
button(@click='onRemove') Remove component
</template>

<script setup>
ref: count = 0
ref: names = []

let onAdd = () => count++
let onRemove = () => count--
</script>

第 2 行

ul
  li(v-for='i in count')
    input(v-model='names[i-1]')/ {{ names[i-i] }}

將動態新增部分寫在 v-for 內，其 v-model 可綁定到 Array。

14 行

let onAdd = () => count++

對 count state 遞增。

15 行

let onRemove = () => count--

對 count state 遞減。

Point-free

add000

結果不變，但使用 Point-free 改寫。

<template lang='pug'>
ul
  li(v-for='i in count')
    input(v-model='names[i-1]')/ {{ names[i-i] }}

button(@click='onAdd') Add component
button(@click='onRemove') Remove component
</template>

<script setup>
import { ref } from 'vue'
import { read, write } from 'vue3-fp'
import { pipe, inc, dec } from 'ramda'

let count = ref(0)
let names = ref([])

let onAdd = pipe(
  read(count),
  inc,
  write(count)
)

let onRemove = pipe(
  read(count),
  dec,
  write(count)
)
</script>

18 行

let onAdd = pipe(
  read(count),
  inc,
  write(count)
)

使用 pipe() 組合 onAdd()：

  • read(count)：讀取 count state
  • inc：對值遞增
  • write(count)：寫入 count state

24 行

let onRemove = pipe(
  read(count),
  dec,
  write(count)
)

使用 pipe() 組合 onRemove()：

  • read(count)：讀取 count state
  • dec：對值遞減
  • write(count)：寫入 count state

Conclusion

  • 動態加入 component 看似很高級課題，但在 Vue 卻異常簡單，只要將 component 寫在 v-for 內，動態遞增 count state 即可

# Vue