繁体   English   中英

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

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM