Nuxt.js2系のcomosition apiで親から子にpropsで値を渡して取得した値の変更を検知したい時にどうしても検知できなくて悩んだので備忘録を残しておきます。
propsの値が受け取れなかった書き方。
props: {
value: { type: String, },
},
setup(props, context) {
const input = ref(props.value);
console.log(input.value); //null
return {
input
}
},propsで受け取った値をrefの変数の中にそのまま代入する書き方だと、中身はnullになり受け取れませんでした。
propsの値が受け取れる書き方。
props: {
value: { type: String, },
},
setup(props, context) {
const inputValue = ref('')
const input= computed(() => props.value);
//または
//const input= toRef ( props, 'value' );
console.log(input.value);
watch(input, () => {
inputValue.value = props.input
})
return {
inputValue
}
},propsで受け取った値をtoRefまたはcomputedでリアクティブな変数に変更した後、その値をwatchで監視するという書き方をするとpropsの値を取得することができました。
あまり納得はできませんがとりあえず動いたのはこの方法でした。
もっといい書き方があれば教えて頂けると幸いです。
関連記事
