Refreshing the v-model in a child component

Question

Refreshing the v-model in a child component

Within my parent component, the code structure is similar to this:

<template>
    <ProductCounter v-model="formData.productCount" label="product count" />
</template>

<script setup>

const initialFormData = {
    productCount: null,
    firstname: '',
    surname: '',
    phone: '',
    email: '',
    postcode: '',
    submittedOnce: false,
    errors: []
}

let formData = reactive({ ...initialFormData });

const clearUI = () => {
    formData = reactive({ ...initialFormData });
    triggerInlineForm.value = false;
}

</script>

The child component is structured like this:

<template>
    <div class="form__row" @reset-counts="resetCount">
        <div class="counter__row">
            <label>{{ label }}</label>
            <div class="form__counter">
                <button class="form__button--decrease form__button--circle form__button--animate-scale" :disabled="value == 0 || props.disabled" @click.prevent="decreaseCount()">
                    <i>
                        <FontAwesomeIcon :icon="['fal', 'minus']" />
                    </i>
                </button>
                <input type="text" v-model="value" :disabled="props.disabled" @input="updateQty" placeholder="0"/>
                <button class="form__button--increase form__button--circle form__button--animate-scale" :disabled="props.disabled" @click.prevent="increaseCount()">
                    <i>
                        <FontAwesomeIcon :icon="['fal', 'plus']" />
                    </i>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

const emits = defineEmits(['update:modelValue', 'resetCounts']);

const props = defineProps({
    label: {
        type: String,
        required: true
    },
    modelValue: {
        type: String,
        required: true,
        default: 0
    },
    disabled: {
        type: Boolean,
        required: false
    }
});

const value = ref(props.modelValue);

const updateQty = () => {
    emits('update:modelValue', value.value)
}

const increaseCount = () => {
    value.value++
    emits('update:modelValue', value.value)
}

const decreaseCount = () => {
    value.value--;
    emits('update:modelValue', value.value)
}

</script>

When triggering clearUI from the parent, I anticipated that when formData is reset, the v-model of ProductCounter would return to 0. However, it does not. Where might I be making an error?

javascript vue.js vuejs3

Answer 1

Answer №1

Link to the live solution

Next time, please provide a minimum reproducible example on https://play.vuejs.org/. Regarding your question:

In Vue, do not overwrite reactive variables...

Mutate them instead

(Object.assign(formData, initialFormData))

:

Also, avoid dereferencing component properties like this:

(const value = ref(props.modelValue))

. This can cause the properties to lose their reactivity due to copying a primitive value.

The optimal way to create a v-model pattern is by using computed, which allows direct manipulation in the template.

const value = computed({
  get(){
    return props.modelValue;
  },
  set(val){
    emits('update:modelValue', val);
  }
});

Additionally, ensure that your count property is defined as a number, not a string (to avoid Vue warnings):

modelValue: {
    type: Number,
    required: true,
    default: 0
},

Furthermore, there's no need to update the prop on the input event since you're already utilizing v-model. Also, make sure to convert your input's model to a number:

<input type="text" v-model.number="value" :disabled="props.disabled" placeholder="0"/>

Here's what you have:

App.vue

<template>
    <p>
      <ProductCounter v-model="formData.productCount" label="product count" />
    </p>
    <button @click="clearUI">
      Clear
    </button>
    <div>
      {{ JSON.stringify(formData) }}
  </div>
</template>

<script setup>
import ProductCounter from './ProductCounter.vue'
import {reactive} from 'vue'
  
const initialFormData = {
    productCount: 0,
    firstname: '',
    surname: '',
    phone: '',
    email: '',
    postcode: '',
    submittedOnce: false,
    errors: []
}

let formData = reactive({ ...initialFormData });

const clearUI = () => {
    Object.assign(formData, initialFormData);
}

</script>

ProductCounter.vue:

<template>
    <div class="form__row">
        <div class="counter__row">
            <label>{{ label }}</label>
            <div class="form__counter">
                <button :disabled="value == 0 || props.disabled" @click.prevent="value--">
                -
                </button>
                <input type="text" v-model.number="value" :disabled="props.disabled" placeholder="0"/>
                <button :disabled="props.disabled" @click.prevent="value++">
                 +
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {computed} from 'vue';
const emits = defineEmits(['update:modelValue']);

const props = defineProps({
    label: {
        type: String,
        required: true
    },
    modelValue: {
        type: Number,
        required: true,
        default: 0
    },
    disabled: {
        type: Boolean,
        required: false
    }
});

const value = computed({
  get(){
    return props.modelValue;
  },
  set(val){
    emits('update:modelValue', val);
  }
});


</script>

Answer 2

Link to the live solution

Next time, please provide a minimum reproducible example on https://play.vuejs.org/. Regarding your question:

In Vue, do not overwrite reactive variables...

Mutate them instead

(Object.assign(formData, initialFormData))

:

Also, avoid dereferencing component properties like this:

(const value = ref(props.modelValue))

. This can cause the properties to lose their reactivity due to copying a primitive value.

The optimal way to create a v-model pattern is by using computed, which allows direct manipulation in the template.

const value = computed({
  get(){
    return props.modelValue;
  },
  set(val){
    emits('update:modelValue', val);
  }
});

Additionally, ensure that your count property is defined as a number, not a string (to avoid Vue warnings):

modelValue: {
    type: Number,
    required: true,
    default: 0
},

Furthermore, there's no need to update the prop on the input event since you're already utilizing v-model. Also, make sure to convert your input's model to a number:

<input type="text" v-model.number="value" :disabled="props.disabled" placeholder="0"/>

Here's what you have:

App.vue

<template>
    <p>
      <ProductCounter v-model="formData.productCount" label="product count" />
    </p>
    <button @click="clearUI">
      Clear
    </button>
    <div>
      {{ JSON.stringify(formData) }}
  </div>
</template>

<script setup>
import ProductCounter from './ProductCounter.vue'
import {reactive} from 'vue'
  
const initialFormData = {
    productCount: 0,
    firstname: '',
    surname: '',
    phone: '',
    email: '',
    postcode: '',
    submittedOnce: false,
    errors: []
}

let formData = reactive({ ...initialFormData });

const clearUI = () => {
    Object.assign(formData, initialFormData);
}

</script>

ProductCounter.vue:

<template>
    <div class="form__row">
        <div class="counter__row">
            <label>{{ label }}</label>
            <div class="form__counter">
                <button :disabled="value == 0 || props.disabled" @click.prevent="value--">
                -
                </button>
                <input type="text" v-model.number="value" :disabled="props.disabled" placeholder="0"/>
                <button :disabled="props.disabled" @click.prevent="value++">
                 +
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {computed} from 'vue';
const emits = defineEmits(['update:modelValue']);

const props = defineProps({
    label: {
        type: String,
        required: true
    },
    modelValue: {
        type: Number,
        required: true,
        default: 0
    },
    disabled: {
        type: Boolean,
        required: false
    }
});

const value = computed({
  get(){
    return props.modelValue;
  },
  set(val){
    emits('update:modelValue', val);
  }
});


</script>

Answer 3

Answer №2

When you modify the formData in the clearUI() function, you are updating the variable's content:

let formData = reactive({ ...initialFormData });

const clearUI = () => {
    formData = reactive({ ...initialFormData });
}

However, this change does not affect the object that was originally linked to the template during component setup. To address this issue, you can utilize ref and assign a new value to it:

const formData = ref({ ...initialFormData });

const clearUI = () => {
    formData.value = { ...initialFormData };
}

Alternatively, you can update the properties individually:

const formData = reactive({ ...initialFormData });

const clearUI = () => {
    Object.assign(formData, initialFormData);
}

Another concern is that when setting the value within ProductCounter to the initial value of props.modelValue, it remains static since it is not a reactive property. To resolve this, you can add a watcher:

const value = ref(props.modelValue);
watch(
  () => props.modelValue,
  () => value.value = props.modelValue
)

This way, value will update accordingly when props.modelValue changes.

You can see this in action in a playground

Answer 4

When you modify the formData in the clearUI() function, you are updating the variable's content:

let formData = reactive({ ...initialFormData });

const clearUI = () => {
    formData = reactive({ ...initialFormData });
}

However, this change does not affect the object that was originally linked to the template during component setup. To address this issue, you can utilize ref and assign a new value to it:

const formData = ref({ ...initialFormData });

const clearUI = () => {
    formData.value = { ...initialFormData };
}

Alternatively, you can update the properties individually:

const formData = reactive({ ...initialFormData });

const clearUI = () => {
    Object.assign(formData, initialFormData);
}

Another concern is that when setting the value within ProductCounter to the initial value of props.modelValue, it remains static since it is not a reactive property. To resolve this, you can add a watcher:

const value = ref(props.modelValue);
watch(
  () => props.modelValue,
  () => value.value = props.modelValue
)

This way, value will update accordingly when props.modelValue changes.

You can see this in action in a playground

Refreshing the v-model in a child component

Answer №1

Answer №2

Similar questions

Setting up a web server with a cyclical challenge

Utilizing Node and Electron to dynamically adjust CSS style properties

Using async/await with Middleware in Express

Create a dynamic process that automatically generates a variety of div elements by using attributes from JSON data

Do not fetch data again after a re-render

Transitioning from one bootstrap modal to another in quick succession may lead to unexpected scrolling problems

Having trouble getting Vue to dynamically change images on mouseover?

Effectively implementing an event observer for dynamically loaded content

The error message "Then is not defined in Element UI Plus" is throwing a ReferenceError

Struggling to implement dynamic templates in an Angular directive

How can I code a script to import JSON data into MongoDB database?

What is the issue with retrieving HTML from an iframe in Internet Explorer when the contents are

How can I utilize the mapv tool created by Baidu in a Node project?

Numerous options available in a dropdown menu

URL Construction with RxJS

Activate the button solely when the text field has been populated without any spaces

`Javascript framework suggests ajax navigation as the preferred method`

I encountered an error message stating "Unexpected token {" while trying to import the module "express-fileupload"

Using JSON data to render images onto a canvas

Ways to minimize renders while toggling a checkbox