json - Vue3 : Using dynamically imported JSON in template

Question

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

我已经成功地导入了 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>

Answer 1

您需要将变量定义为 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
    };
},