聞きたいこと
- Vue
- Composition API
- Ant Design
を用いてWeb開発しているのですが、inputタグをカスタマイズして独自のコンポーネントを作成して使用しようと考えています。
具体的には下のようにカスタマイズしようと考えているのですが、カスタマイズしたコンポーネントを呼び出す側で、v-modelを指定しても、v-modelで指定した値がinputタグに入力した値と連動して変化しません。
- カスタムコンポーネント
CustomComponent
1<template> 2 <div style="..."> 3 <input v-model="textValue" /> 4 </div> 5</template> 6 7: 8 9<script lang="ts"> 10 11: 12props: { 13 value: { 14 type: String, 15 required: false, 16 } 17} 18 19: 20 21setup(props: any, ctx: SetupContext) { 22 const textValue = computed({ 23 get: () => props.value, 24 set: (value) => ctx.emit('input', value), 25 }) 26}
- 呼び出し元コンポーネント
Page
1<template> 2 <base-input v-model='form.text'> 3</template> 4 5: 6<script lang="ts"> 7 8: 9 10setup(props: any, ctx: SetupContext) { 11 const form = { 12 : 13 } 14} 15 16</script>
参考サイト: Vue.jsのv-modelを正しく使う
あなたの回答
tips
プレビュー