Как скопировать данные из пропса в дочернем компоненте?

Question

[Тимофей]

В документации vue js есть данный код

const props = defineProps(['initialCounter'])

const counter = ref(props.initialCounter)

При изменении counter в дочернем компоненте, данные сразу меняются в родительском. Как мне скопировать данные из пропса чтоб они не менялись в родителе?

Answer 1

[MaxRyazan]

просто юзай данные через
props.initialCounter, без копирования в другой объект

Comments

[Тимофей]

вместо initialCounter у меня массив со списком виджетов, я хочу чтоб пользователь выбрал нужные и только после сохранения, когда я отправлю все на бэк данные изменились в родителе.

[MaxRyazan]

приведи код, без кода ничего не понятно

[Тимофей]

MaxRyazan,

<script setup>
import {ref} from "vue";

const props = defineProps(['widgets']);
const emit = defineEmits(['update']);
const widgetsData = ref(props.widgets);
const loading = ref(false);
const modal = ref(false);

const save = () => {
}
</script>

<template>
    <el-button type="primary" size="large" class="p-4" @click="modal = true">
        <el-icon :size="18">
            <Setting/>
        </el-icon>
    </el-button>
    <el-dialog title="Виджеты" v-model="modal" :append-to-body="true">
        <template v-for="(widget, index) in widgetsData">
            <el-card body-class="p-2" class="mb-2">
                <div class="flex justify-between">
                    <div class="my-auto ms-4">{{ widget.name }}</div>
                    <div class="me-2 my-auto">
                        <el-switch size="small" v-model="widget.active" inline-prompt/>
                    </div>
                </div>
            </el-card>
        </template>
        <template #footer>
            <el-button @click="save">Сохранить</el-button>
        </template>
    </el-dialog>
</template>

[MaxRyazan]

const switcher = ref(widget.active)
const emits = defineEmits<{
(e: 'editWidget', param: any) : void
}>()

<el-switch size="small" v-model="switcher" inline-prompt/>

watch(switcher , () => {
   emits('editWidget', switcher.value)
})

В родителе ловишь этот эмит с новым значением и переопределяешь его у виджета, отправляешь на бэк, получаешь ответ - и вуаля, массив виджетов обновлён и изменения учтены
Накидал на скорую руку на во время шашлыков, так что не суди строго )