Vue3:在模板中动态导入JSON

Question

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

我已经成功地导入了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，以便使变量具有响应性，即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
};
},