vue3の双方向データバインドについて

vue3の双方向データバインドについて質問です。
vue3で子コンポーネントのcheckboxの値を親に渡したいです。

親

js
1<template>
2  <div>
3    <Test v-model="checked" />
4    <button type="submit" class="text-white bg-blue-500">
5      新規登録
6    </button>
7  </div>
8</template>
9
10<script>
11import Test from "@/components/Test.vue";
12
13export default {
14  name: "Testbb",
15  components: {
16    Test,
17  },
18  data() {
19    return {
20      checked: false,
21    };
22  },
23  methods: {
24    submit: function() {
25      console.log(this.checked);
26    },
27  },
28};
29</script>
30

子

js
1<template>
2  <label>
3    <input type="checkbox" v-model="inputedValue" />
4    {{ checked }}
5  </label>
6</template>
7
8<script>
9export default {
10  name: "Test",
11  model: {
12    prop: "checked",
13    event: "change",
14  },
15  props: {
16    checked: {
17      type: Boolean,
18    },
19  },
20  computed: {
21    inputedValue: {
22      get() {
23        alert(this.checked);
24        return this.checked;
25      },
26      set(newValue) {
27        this.$emit("change", newValue);
28      },
29    },
30  },
31};
32</script>
33

子でalertしているところが、checkboxを切り替えても発動しません。(初期表示時は読み込まれる)
https://codesandbox.io/s/vue-js-zai-ru-men-v-model-wozheng-sikuli-jie-siteqin-zi-jian-konponentonodetachuan-bo-womasutasuru-v-model-ver-forked-cls6o?file=/src/components/CustomCheckbox.vue
こちらのinput textを抜いて真似しただけですが、何が間違っているのでしょうか。

行動規範の内容に同意します

回答1件

参考しているURLで利用されているのはVue2の双方向データバインドですが、Vue3ではv-modelに破壊的変更が行われたためそれは正しく動作しません。
Vue3ではv-modelでバインドされる(既定の)プロパティ名はmodelValue、v-modelで変更があったことを処理するイベントはupdate:modelValueに変わりました。

以下URLを確認してみてください。
https://v3.ja.vuejs.org/guide/migration/v-model.html#v-model

投稿2021/10/21 02:15