Почему у меня реактивно изменяется данные в props?

Question

[Руслан Абсалямов]

Кто может подсказать, почему у меня в компоненте меняется props? Хотя я меняю другие данные, которые в data находиться и не передаю их emit
Вот моя реализация на сайте https://pyvjxxnnvj.codesandbox.io/#/employee . Когда открываешь модальное окно и переключаешь чекбоксы, то в таблице начинается также меняться.
Сам компонент код

<template>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper" @click.self="$emit('close')">
                <div :class="classModal">
                    <div class="modal-header" v-if="type !== 'employee'">
                        <div class="d-flex">
                            <div class="modal-header_text">
                                <slot></slot>
                            </div>
                            <div class="close-icon">
                                <i class="material-icons" @click="$emit('close')">close</i>
                            </div>
                        </div>
                     
                    </div>
                    <div :class="['modal-body']">                     
                            <div class="row field-column" v-for="(field, index) in columns">
                                <div class="col-sm-10 d-flex justify-content-between">
                                    <label :for="field.name">{{ field.label }}</label>
                                    <span class="icon-draggable">
                                        <i class="material-icons">more_vert</i>
                                        <i class="material-icons">more_vert</i>
                                    </span>
                                </div>
                                <div class="col-sm-2">
                                    <input
                                            :id="field.name"
                                            type="checkbox"
                                            class="checkbox-custom"
                                            v-model="field.disabled"
                                            @click="actionColumns(field.name, index)"
                                    />
                                </div>
                            </div>
                      
                    </div>

                    <div class="modal-footer" v-if="type === 'columns'">
                        <button
                                class="modal-default-button btn btn-primary"
                        >Применить</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
    import tabs from './tabs.vue'
    export default {
        name: "modal",
        props: ["items", "type"],
        data() {
            return {
                selected: {},
                columns: [],
            }
        },
        methods: {
            actionColumns(name, index) {
                this.selected[name] = !this.selected[name];
                this.remove = false;
                this.select = false;
            },
        },
        created() {
            let props = this.$props;
            if (props.type === 'columns') {
                for (let i = 1; i < props.items.length; i++) {
                    let item = props.items[i];
                    this.columns.push(item)//Добавляем все данные в columns, кроме 0 индекса.
                }
            }
        },
    };
</script>

Весь код https://codesandbox.io/s/pyvjxxnnvj /scr/components/ModalComponent.vue
Вид который вызывает это модальное окно /scr/views/App.vue

Answer 1

[0xD34F]

я меняю другие данные

Это вам так кажется. Чтобы не казалось, надо заполнить пробелы в знаниях основ js.

Хотите, чтобы не менялось - вырезаете created, в качестве начального значения columns устанавливаете

this.type === 'columns'
  ? this.items.slice(1).map(n => ({ ...n }))
  : []

Comments

[Руслан Абсалямов]

То есть я сделал так

created() {
            this.$props.type === 'columns'
                ? this.$props.items.slice(1).map(column => {this.columns.push(column)})
                : [];
        },

Я правильно понял?

[0xD34F]

Руслан Абсалямов, нет.

[Руслан Абсалямов]

0xD34F, Это в data писать имеется ввиду?

[0xD34F]

Руслан Абсалямов, в data. Но не это.

[Руслан Абсалямов]

0xD34F, Все догнал

[Руслан Абсалямов]

0xD34F, в computed наверное как понимаю

[0xD34F]

Это вам виднее. Я лишь предложил исправление того кода, который вы показали, без изменения предполагаемого поведения.

[Руслан Абсалямов]

0xD34F, А что означает ({ ...n }) Есть где-то это прочитать? Просто хочется почему именно так работает

[0xD34F]

Руслан Абсалямов, spread.