嵌套数组不会在 Vue3 模板中呈现

Question

我正在分配一个嵌套数组，从 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吗？

Answer 1

在第一次渲染嵌套值不可用时，您应该添加一个条件来检查它们的可用性：

<h2 v-if="state.articles[0].length">{{ state.articles[0][0] }}</h2>