将JSON文件作为克隆导入到Vue数据属性中

Question

我在Vue data属性中使用外部数据时遇到问题。

请考虑以下来自我的组件的代码段：

export default {

    data() {
        return {
            gallery: require('core-js/support/some-page-gallery.json')
        }
    },

    created() {

        // Prepare the images for the gallery
        this._buildImageURLs();

    },

    methods: {

        /**
         * Build the image urls for the gallery.
         *
         * @return void
         */
        _buildImageURLs() {

            this.gallery.forEach(image => {
                Object.entries(image.images).forEach(([key, source]) => {
                    image.images[key] = this.$staticAsset(`/assets/images/misc/${source}`);
                });
            });

        }

    }

}

上面的问题是修改this.gallery似乎是修改了原来导入的数组。

这将导致以下结果：

• 在页面加载时，image.images[0]等于example.com/assets/images/misc/example.jpg
• [导航离开，然后返回该页面时，image.images[0]等于example.com/assets/images/misc/example.com/assets/images/misc/example.jpg

require将我的JSON文件作为克隆而不是作为参考的最佳方法是什么？假设这是哪里出了问题...

或者，是否有更好的方法将数据导入到我的组件中？

我尝试了什么？

我也尝试过使用import，但是结果完全一样。

[此外，我曾考虑过将this.gallery作为参数传递给this._buildImageURLs()，我相当有信心可以使它正常工作，但是我很犹豫，因为这似乎不是正确的方法。] >

更新

只要以上内容不清楚，我面临的问题是this.gallery充当对导入文件的引用。结果，导入的数据将在我的整个应用程序中保持其编辑状态。

当我第一次进入页面最后时，_buildImageURLs方法可以正确修改数据。但是，如果我导航离开，然后返回页面，则修改后的数据将再次被修改，从而导致重复的修改。

我在Vue数据属性中使用外部数据时遇到问题。考虑一下我组件中的以下代码段：export default {data（）{return {gallery：...

Answer 1

您可以使用gallery这样复制Object.assign：

Answer 2

您需要在forEach语句上进行任何更改之前复制JSON：