gpt4 book ai didi

json - Vue3 : Using dynamically imported JSON in template

转载 作者:行者123 更新时间:2023-12-05 04:53:23 25 4
gpt4 key购买 nike

在我的 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>

最佳答案

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

关于json - Vue3 : Using dynamically imported JSON in template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66109818/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com