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

【问题标题】：Vue3: Using dynamically imported JSON in templateVue3：在模板中使用动态导入的 JSON
【发布时间】：2021-05-12 13:01:20
【问题描述】：

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

我已经成功地导入了 json，并且可以在导入函数中使用它。但是我到底如何从导入函数中获取 json 以便我可以在模板中使用它呢？请参阅下面代码中的 cmets。这是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>

【问题讨论】：

标签： json dynamic import vuejs3

【解决方案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
    };
},

【讨论】：