vue.js - 在特定索引处从 Vuex 获取对象

Question

我从 Vuex 得到一个数组，我想要一个位于 2 个位置的对象。

HTML

<p class="">
    {{ MainImg[2].para}}
  </p>

Vue

export default {
name: "App",
components: {  },
data() {
return {
  imageQuery: this.$route.params.image,
};
},
computed: {
...mapGetters("design", {
  MainImg: ["singleDesigns"]
})
},
created() {
this.fetchDesigns();
},
mounted() {
 console.log(this.MainImg);
},

methods: {
fetchDesigns() {
  this.$store.dispatch("design/getSingleDesign", this.imageQuery); 
    }
  }
};

但它显示了一个未定义的错误。当我像这样在 Vue 数据中添加 MainImg 数组时。

data() {
return {
  imageQuery: this.$route.params.image,
  MainImg:[{para:"1"},{para:"2"},{para:"3"},{para:"4"}]
};

有用。PS-商店代码-

export const state = () => ({
designs: [],
})

export const getters = {
  singleDesigns(state)  {
    return state.designs;
  }
}

我没有添加 Action 和 Mutation，因为它可以与其他代码一起正常工作。

标签： vue.jsnuxt.jsvuex

Answer 1

看起来数组在第一次渲染时是空的，所以你应该添加一个条件来渲染它：

<p class="" v-if="MainImg && MainImg.length >= 2">
    {{ MainImg[2].para}}
  </p>