Vue3 Breaking Changes Template Directive編 ~v-model,v-for~

12319 ワード
JavaScript TypeScript vuejs Zenn tech テキストリンク

Vue3移行におけるBreaking Changes

Vue3.0 Breaking Changesの記事の一部になっています。

Template Directive

Vue3

v-modelに引数が使えるようになり、複数の変数を指定できるようになります。

ちなみにVue2で同じことをやろうとすると

Lintにerror 'v-model' directives require no argument
と怒られます。

Vue3

Parent
<template>
  <Child
    v-model:inputLastName="inputLastName"
    v-model:inputFirstName="inputFirstName"
  />
  <!-- or -->
  <Child
    :inputLastName="inputLastName"
    @update:inputLastName="inputLastName = $event"
    :inputFirstName="inputFirstName"
    @update:inputFirstName="inputFirstName = $event"
  />
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue"
import Child from '@/components/Child.vue'

export default defineComponent({
  components: { Child },
  setup() {
    const state = reactive({
      inputLastName : '',
      inputFirstName : '',
    })

    return {
      inputLastName: state.inputLastName,
      inputFirstName: state.inputFirstName
    }
  }
})
</script>
Child
<template>
  <input
    :input="inputLastName"
    @input="$emit('update:inputLastName', $event.target.value)"
    type="text"
  >
  <input
    :input="inputFirstName"
    @input="$emit('update:inputFirstName', $event.target.value)"
    type="text"
  >
</template>

v-for

templateタグ内のv-forに直接keyが振れる

Vueだと

The template root requires exactly one element.
と怒られてしまいます。

Vue2

<template>
  <template v-for="(sport, index) in sportsList">
    <div :key="index">
      {{index}}: {{sport}}
    </div>
  </template>
</template>

<script lang="ts">
export default {
  computed: {
    sportsList() [
      'Baseball',
      'Football',
      'Basketball',
      'Tennis'
    ]
  }
}
</script>

Vue3

<template>
  <template v-for="(sport, index) in sportsList" :key="index">
    {{index}}: {{sport}}
  </template>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue"

export default defineComponent({
  setup() {
    return {
      sportsList: computed(() =>[
      'Baseball',
      'Football',
      'Basketball',
      'Tennis'
    ])
    }
  }
})
</script>

最後に

上記の内容について、2020/11/18(水)の19:30~ オンラインで開催するフロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15に登壇させていただきます。

本記事では、登壇する内容の全文をzennにて公開します。

Twitter もやってます。

【Rails】コールバックについて
goでWebサービス No.11(WebAssembly)