[英]Nested array won't render in Vue3 template
I am assigning a nested array from an axios.get
response
to state.articles
:我正在将
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>
from this, console.log(state.articles[0][0])
outputs 6
which is the correct id
.由此,
console.log(state.articles[0][0])
输出6
这是正确的id
。
However, when I want to render the id
in my component:但是,当我想在我的组件中呈现
id
时:
<h2>{{ state.articles[0][0] }}</h2>
it throws several errors:它引发了几个错误:
Why is state.articles[0][0]
undefined
and why does it work in my component's script
element but not in the template
?为什么
state.articles[0][0]
undefined
,为什么它在我的组件的script
元素中有效,但在template
无效?
state.articles[0]
renders the correct array in the 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."
]
Shouldn't its 0
element be 6
?它的
0
元素不应该是6
吗?
在第一次呈现嵌套值不可用时,您应该添加一个条件来检查它们的可用性:
<h2 v-if="state.articles[0].length">{{ state.articles[0][0] }}</h2>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.