panthro's avatar

Modify a model based upon a users value?

I need to have a component that has a text input, but what the user types is modified before sending it up to the parent model...

const model = defineModel({
    type: String,
});

const inputModel = ref('');

<input v-model="inputModel" />

So I declare model using defineModel so the parent can access it.

I also declare inputModel so my inputs value is stored soemwhere.

But, how do I modify the inputModel and assign it to model?

For example, let's pretend we want to use .toLowerCase():

const model = defineModel({
    type: String,
});

const inputModel = ref('');

<input v-model="inputModel" /> //when this changes set model.toLowerCase() - how?
0 likes
4 replies
vincent15000's avatar

That's the second post you write here for the same problem.

Why ?

panthro's avatar

@vincent15000 not the same problem, one post discusses an issue, the other asks how to do something.

1 like
experimentor's avatar

From Vue documentation:

<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

Add @input event to your input and use a function to assign the input value to the model.

1 like

Please or to participate in this conversation.