🖥
Nuxt3 / Vue3 – v-for の中で v-model を使う
配列の例
<template>
<div>
<form>
<dl v-for="person in people">
<dt>{{ person.name }}</dt>
<dd>
<input v-model="person.value">
{{ person.value }}
</dd>
</dl>
<input type="submit" @click="submit">
</form>
</div>
</template>
<script setup lang="ts">
function submit(event){
event.preventDefault()
console.log(people.value)
}
const people = ref(
[
{ name: "Alice", value: '' },
{ name: "Bob", value: '' },
{ name: "Carorl", value: '' },
]
)
</script>
連想配列の例
<template>
<div>
<form>
<dl v-for="(person, key) in people">
<dt>{{ key }}</dt>
<dd>
<input v-model="person.value">
{{ person.value }}
</dd>
</dl>
<input type="submit" @click="submit">
</form>
</div>
</template>
<script setup lang="ts">
function submit(event){
event.preventDefault()
console.log(people.value)
}
const people = ref(
{
alice: { value: '' },
bob: { value: '' },
carol: { value: '' },
}
)
</script>
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2023-02-28
Discussion