1. Duyệt mảng và cập nhật thuộc tính đối tượng

Trong quá trình xử lý dữ liệu từ API hoặc chuẩn bị dữ liệu hiển thị, việc duyệt qua mảng để gán thêm các thuộc tính mặc định là thao tác phổ biến. Bạn có thể sử dụng vòng lặp for cơ bản hoặc phương thức forEach kết hợp với Spread Operator để merge các object.

// Duyệt mảng và cập nhật style cho từng item
const baseConfig = { visible: true, color: '#fff' };
renderList.forEach((element, index) => {
    const updatedContent = { ...baseConfig, ...element.config };
    renderList[index] = { ...element, config: updatedContent };
});

// Kiểm tra sự tồn tại của key trước khi xử lý logic
this.dataSource.forEach(item => {
    if (Object.prototype.hasOwnProperty.call(item, 'metadata')) {
        console.log('Phần tử chứa dữ liệu metadata');
        this.globalStore.activeNodes.push(item.metadata);
    }
});

2. Tìm kiếm và loại bỏ phần tử trong mảng

Để xóa một phần tử cụ thể khỏi mảng dựa trên một định danh (ID hoặc Key), tổ hợp findIndex và splice thường được ưu tiên để tác động trực tiếp vào mảng hiện tại.

const targetKey = targetComponent.id;
const position = this.layoutData.children.findIndex(node => node.id === targetKey);

if (position !== -1) {
    this.layoutData.children.splice(position, 1);
}

3. Đảm bảo tính phản ứng khi thêm thuộc tính vào Object

Trong Vue 2, việc gán trực tiếp một thuộc tính mới vào đối tượng (ví dụ: obj.newProp = value) sẽ không kích hoạt quá trình cập nhật giao diện vì thuộc tính đó không nằm trong phạm vi quan sát (observer) ban đầu. Chúng ta cần sử dụng this.$set.

// Cú pháp: this.$set(object, key, value)
this.$set(this.userProfile, 'lastLogin', '2023-10-27');

4. Cập nhật State trong Vuex

Khi làm việc với Vuex, việc thay đổi dữ liệu trong state cần được thực hiện thông qua các mutations. Đối với các cấu trúc dữ liệu lồng nhau phức tạp, bạn có thể truy cập trực tiếp qua chỉ mục để cập nhật.

// Cập nhật giá trị cụ thể trong mảng thuộc state
updateModel(state, payload) {
    const targetIdx = payload.index;
    state.projectConfig.layers[targetIdx].params.dataId = payload.newDataId;
}

Đối với các trường hợp key của object được tạo động một cách phức tạp, hãy sử dụng Vue.set để đảm bảo các component đang sử dụng state này sẽ nhận được thay đổi.

import Vue from 'vue';

// Cập nhật key động trong một registry phức tạp
updateRegistry(state, { compId, resourceData }) {
    const dynamicKey = `${state.currentSchema}_${compId}_ref`;
    Vue.set(state.resourceRegistry, dynamicKey, resourceData);
}

5. Cơ chế giao tiếp Parent-Child điều khiển Dialog

Một mô hình phổ biến là quản lý việc đóng/mở Dialog (con) từ Component cha. Dưới đây là cách triển khai sạch sẽ thông qua Props và Events.

Tại Component Cha

Sử dụng một biến trạng thái để điều khiển việc render và hiển thị của Dialog. Sử dụng v-if để hủy hoàn toàn instance của component con khi không cần thiết, giúp giải phóng bộ nhớ.

<!-- Template cha -->
<DataEditorDialog 
    v-if="isDialogActive" 
    :visible.sync="isDialogActive" 
    @onClose="handleDialogClose"
/>

<script>
export default {
    data() {
        return {
            isDialogActive: false
        };
    },
    methods: {
        handleDialogClose() {
            this.isDialogActive = false;
        }
    }
}
</script>

Tại Component Con (DataEditorDialog)

Vì props trong Vue tuân thủ nguyên tắc "One-Way Data Flow" (luồng dữ liệu một chiều), component con không nên trực tiếp thay đổi giá trị của prop. Thay vào đó, nó sẽ phát một sự kiện (emit) để báo cho cha thực hiện thay đổi.

<!-- Template con (sử dụng Element UI hoặc tương tự) -->
<el-dialog :visible="visible" @close="requestClose">
    <span>Nội dung chỉnh sửa dữ liệu</span>
    <div slot="footer">
        <el-button @click="requestClose">Hủy bỏ</el-button>
    </div>
</el-dialog>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        requestClose() {
            // Phát tín hiệu yêu cầu cha cập nhật lại trạng thái
            this.$emit('update:visible', false);
            this.$emit('onClose');
        }
    }
}
</script>

Việc sử dụng modifier .sync ở phía cha là một cách viết tắt giúp tự động lắng nghe sự kiện update:visible để cập nhật lại biến isDialogActive, giúp code ngắn gọn và dễ bảo trì hơn.