vue3でのcomputedのgetter, setter

はじめに

こんばんは。 かんたんな備忘録ですが、vue3では初めて書いたので残しておきます。

本題

propsのデータを 子コンポーネントに存在するフォームのmodelで使用したい

そして、変更の結果を emitしたいみたいなパターンで使ってます。

vue2 ではこんな感じで使ってました。

vue2

props: {
  item: {
    type: String,
    required: true
  }
},
computed: {
    computedItem: {
      get() {
        return this.item
      },
      set(value) {
        this.$emit('changeItem', value)
      }
    }
  }

それをvue3ではこんな表現します。

vue3

const props = defineProps({
  item: {
    type: String,
    required: true
  }
})
const emit = defineEmits(['changeItem'])
const computedItem = computed({
  get: () => props.item.value,
  set: (value) => emit('changeItem', value)
})

vue3まだ慣れてないので、個人的にはまだvue2のほうが書き方的に慣れてますが、そのうち慣れてくのかな？

終わりに

最近うまく勉強できない日が続いています。

できないことでテンションを下げちゃっているのですが、できない自分を認めて、できるところからやっていこうと思います。

現場からは以上です。