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

Caution: It is important for every child in a list to have a distinctive "key" prop value. How can a shared key be used for multiple items?

Dispatch is functioning properly, however the state remains unchanged

Angular 8 experiencing unexpected collision issues

The Node.js engine isn't updating to support compatibility with Firebase functions

What causes the appearance of an HTTP header error and how can we identify the bug?

Is it possible to combine multiple jQuery selectors for one command?

How can I track and log the name of the country each time it is selected by a click?

Troubleshooting: Issues with window.location.href and window.open within an iframe

Even with the v-once directive applied, the component will still update whenever there is a change in the value of a property within a

What is the process for editing a JSON file and preserving the modifications?

When the mouse leaves, the gauge chart component's size will expand

Creating identical class names for UL elements underneath LI using JavaScript

Extract the response data following a axios post request (using vue and laravel)

verifying the presence of offspring in knockout js

Retrieving the slug from the parameters in the API response using this.$route

How to visually represent options without labels using icons in Material UI Autocomplete

iOS now supports fully transparent tooltips and modals, offering a sleek and

I am unable to retrieve images using the querySelector method

Verify whether the chosen options from a dropdown list coincide with a predetermined value

How can Swiper efficiently display the next set of x slides?