🖥

Nuxt3 / Vue3 – v-for の中で v-model を使う

2023/09/01に公開

配列の例

<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>

image

連想配列の例

<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>

image

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2023-02-28

Discussion