Как правильно передать переменную с реактивностью в компонент?

Question

Я хочу добиться что бы компонент работал с локальной копией параметра row, но в данный момент при изменении props.row.name реактивно происходят изменения в FormsListValue из родителя. Как правильно передать параметр в компонент что бы значение не менялись в родительском компоненте ?

Parent

<script setup>
import { ref } from 'vue';
import EditFormLayout from '@/views/layout/Forms/EditFormLayout.vue';

const FormsListValue = ref({});
const FormsListValues = ref([
    { name: 'New York', id:1},
    { name: 'Rome', id:2},
]);
</script>
<template>
    <Dropdown 
        v-model="FormsListValue" 
        :options="FormsListValues" 
        optionLabel="name" 
        placeholder="Select" 
    />
    <EditFormLayout 
        :row="FormsListValue" 
        @EditForm="editForm"
    />

</template>

Child

<template>
        <Button label="Edit" icon="pi pi-times" @click="visibleModal = true"/>
        <Dialog header="Dialog" v-model:visible="visibleModal" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
            <p class="line-height-3 m-0">
                <div class="field">
                    <label for="title">Название</label>
                    <InputText v-model:modelValue="props.row.name" id="title" type="text" />
                </div>
            </p>
            <template #footer>
                <Button 
                    label="Save" 
                    @click="visibleModal = false, $emit('EditForm', props.row)" 
                    icon="pi pi-check" 
                    class="p-button-outlined" 
                />
            </template>
        </Dialog>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps(['row']);
const visibleModal = ref(false);
</script>

Answer 1

Заведите свою локальную переменную и работайте с ней.

data(){
    return {
        row: {
            name: toValue(this.props.row.name),
            id: toValue(this.props.row.id)
        }
    }
}

<template>
        <Button label="Edit" icon="pi pi-times" @click="visibleModal = true"/>
        <Dialog header="Dialog" v-model:visible="visibleModal" :breakpoints="{ '960px': '75vw' }" :style="{ width: '30vw' }" :modal="true">
            <p class="line-height-3 m-0">
                <div class="field">
                    <label for="title">Название</label>
                    <InputText v-model:modelValue="row.name" id="title" type="text" />
                </div>
            </p>
            <template #footer>
                <Button 
                    label="Save" 
                    @click="visibleModal = false, $emit('EditForm', row)" 
                    icon="pi pi-check" 
                    class="p-button-outlined" 
                />
            </template>
        </Dialog>
</template>

БЛОГ НА HUSL

Как правильно передать переменную с реактивностью в компонент?

Ответы (1 шт):