嵌套數組不會在 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>