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

如何解决Vue3：在模板中使用动态导入的 JSON

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

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

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

            };
        },};
    </script>
    <style scoped lang="scss">
    </style>

解决方法

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

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
    };
},