All the examples of using defineModel
are with <script setup>
. What if I want to use defineModel
inside defineComponent
?
It seems to be possible, but I’m struggling with setting the default model value. When I try this,
in parent component:
<Child v-model="foo" /> (foo is "1")
in child component:
<script>
import { defineComponent, defineModel } from 'vue'
export default defineComponent({
setup(props, ctx) {
const model1 = defineModel()
console.log(model1) // returns "undefined" here and when used in template
console.log(ctx.attrs.modelValue) // returns "1"
const model2 = defineModel({ type: String, default: ctx.attrs.modelValue })
console.log(model2) // returns "undefined" here and when used in template
return { model1, model2 }
}
})
</script>
I tried two approaches (model1
and model2
) but both don’t work.
Why is model1
and model2
not picking up the default value from the modelValue
fallthrough attribute (passed from parent to child with v-model="foo"
)? I’m on Vue v.3.4.23.