Question 245782 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to pass and modify v-model to the vue component?

I’m trying to pass as a prop attribute some input fields and emit it to the parent component, but can’t edit the input fields. I’m passing props down as a titled v-model to the child component. I think I’m wrong with the logic and reading correctly the docs, just can’t get it. When I’m typing the input nothing remains in the input field.

function fullname() {
  return {
    fullname: {
      firstname: 'Adam',
      lastname: 'Coll'
    }
  }
}
export { fullname }

Parent component

<template>
  <Child
    v-model:windDirectionDep="names.fullname.firstname"
    v-model:windDirectionArr="names.fullname.lastname"/>
</template>

<script>
   import { name as setName } from '../'
    
   data () {
    return {
      names: {}
    }
  },
  methods: {
    setName () {
      this.names = setName()
    }
  },
  created () {
    this.setName()
  },
</script>

Child component

<template>
  <q-input
    name="firstname"
    :value="windDirectionDep"
    @update:model-value="(value) => emit('update:windDirectionDep', value)" />
  
  <q-input
    name="lastname"
    :value="windDirectionArr"
    @update:model-value="$emit('update:windDirectionArr', $event)" />
  </q-input>
        
</template>

<script>
  props: [
    'windDirectionDep',
    'windDirectionArr'
  ],
</script>
Tags:

2

Answers


  1. 0

    The Quasar <q-input> component is not the same as the native HTML <input> and should not be assumed to emit the same events.

    If you check the q-input API under the "Events" tab you can see all the events you can listen to. The one you want is @update:model-value. The model value will also not be on $event.target.value but will just be $event.

    Your q-input should then look something like:

    <q-input
  name="firstname"
  :model-value="windDirectionDep"
  @update:model-value="$emit('update:windDirectionDep', $event)">
</q-input>
    Login or Signup to reply.
  2. 0

    Try this way. Instead of using :value and @update:model-value you can use computed way as explained here

    //Parent

<template>
<Child
    v-model:wind-direction-dep="names.fullname.firstname"
    v-model:wind-direction-arr="names.fullname.lastname"/>
</template>

<script>
   import { name as setName } from '../'
    
   data () {
    return {
      names: {}
    }
  },
  methods: {
    setName () {
      this.names = setName()
    }
  },
  created () {
    this.setName()
  },
</script>

    Note that I used pascal-case (wind-direction-dep and wind-direction-arr) for v-model arguments

    //Child
<template>
  <q-input
    name="firstname"
    v-model="windDirectionDepModel"
    />
  
  <q-input
    name="lastname"
    v-model="windDirectionArrModel"
    />
        
</template>

<script setup>
  import { computed } from 'vue';
  const props = defineProps([
    'windDirectionDep',
    'windDirectionArr'
  ]) 
  const emit = defineEmits([
    'update:windDirectionDep'
    'update:windDirectionArr'
  ])
  const windDirectionDepModel = computed({
    get: function() {
      return props.windDirectionDep
    },
    set: function(val) {
      emit('update:windDirectionDep',val)
    }
  })
  const windDirectionArrModel = computed({
    get: function() {
      return props.windDirectionArr
    },
    set: function(val) {
      emit('update:windDirectionArr',val)
    }
  })
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search