[英]Nested array won't render in Vue3 template
我正在将axios.get
response
的嵌套数组分配给state.articles
:
<script setup>
import {reactive} from "vue";
const state = reactive({
locale: sessionStorage.locale,
articles: []
})
axios.get('/blog-index')
.then(res => {
const data = res.data
for (const [, value] of Object.entries(data)) {
state.articles.push([
value['id'],
value['heading_' + state.locale],
value['descr_' + state.locale],
value['content_' + state.locale]
]);
}
console.log(state.articles[0][0])
})
.catch(err => {
console.log(err);
console.log(err.response);
});
</script>
由此, console.log(state.articles[0][0])
输出6
这是正确的id
。
但是,当我想在我的组件中呈现id
时:
<h2>{{ state.articles[0][0] }}</h2>
它引发了几个错误:
为什么state.articles[0][0]
undefined
,为什么它在我的组件的script
元素中有效,但在template
无效?
state.articles[0]
在template
呈现正确的数组:
[
6,
"Newest Article",
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ullam velit voluptatem.",
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda ullam velit voluptatem. Aliquid amet consectetur corporis dignissimos, dolorum earum eligendi error esse eum ipsam modi molestias pariatur quasi qui quis repudiandae sint ullam voluptatum? Animi dolorem molestiae reprehenderit ullam voluptates."
]
它的0
元素不应该是6
吗?
在第一次呈现嵌套值不可用时,您应该添加一个条件来检查它们的可用性:
<h2 v-if="state.articles[0].length">{{ state.articles[0][0] }}</h2>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.