Vue3：在模板中使用动态导入的 JSON

Question

在我的 Vue3 视图中，我需要使用动态路径导入 json，因为 json 文件名取决于浏览器 url。例如，domain.com/canada 使用 ..canada.j\xcc\x81son，domain.com/use 使用 ..usa.json，而在这两种情况下都使用相同的视图文件。

\n

我已经成功导入了 json 并可以在导入函数中使用它。但是我到底如何从导入函数中获取 json 以便我可以在模板中使用它呢？请参阅下面代码中的注释。这是views/test.vue

\n

   <template>\n        <div class="card">\n            <h1>{{ IWantContentFromJsonHere }}</h1>\n        </div>\n    </template>\n    \n    <script>\n    import { computed } from "vue";\n    import { useRoute } from "vue-router";\n    \n    export default {\n        name: "Test",\n\n        //Value for this is coming from router/index.js\n        props: ["jsonLocation"], \n\n        //Here I tried to set a variable outside the import scope\n        //but it is not working. See comments below\n        let var1 = "original value"; \n        \n        setup(props) {\n            import(`@/assets/json/${props.jsonLocation}`).then((module) => {\n                //this below are working just fine, so json is parsed OK.\n                console.log(module.default.canada.toronto);\n                \n                \n                //this prints "original value" so var1 works here\n                console.log(var1);\n                //and I can change the value of var1 here to print the json\n                var1 = module.default\n                console.log(var1); //this prints the json\n            });\n            return {\n                //and i can return the var1 here, but the value here is "original value"\n                //So if I use it at template at top of the code, \n                //it just renders "original value", not the json I want\n                var1\n\n            };\n        },\n    };\n    </script>\n    <style scoped lang="scss">\n    </style>\n

\n

Answer 1

您需要将变量定义为 Ref 以使变量具有反应性，即 dom 在var1更新时也会更新：

import { ref } from 'vue'
    
setup(props) {
    let var1 = ref("original value"); 

    import(`@/assets/json/${props.jsonLocation}`).then((module) => {
        var1.value = module.default // modify var1 by assigning to var1.value
    });
    return {
        var1
    };
},