从Vue中的Array获取数据

Question

现在，我页面中显示的数据是一个数组，如下面的代码段所示：

但我只希望获取或显示项目名称。

这就是我现在所拥有的：

fetch(context,id){
        if(context.getters['isEmpty']){
            Vue.api.mediasetting.index()
                .then(response=>{
                    var medias = response.data[key];

                    context.commit('setMedias',medias);
                    // console.log("init medias", medias[0].project_name)
                },response=>{

                });
        }
    },

我可以在此处应用过滤器以及如何应用过滤器？感谢。

Answer 1

取决于您要用于呈现值的html元素，您可以使用v-for directive来呈现project_name值：

<template>
  <ul id="example">
    <li v-for="(media) in medias">
      {{ media.project_name }}
    </li>
  </ul>
</template>

您需要从商店获取媒体数据，您可以使用computed property获取该数据：

<script>
export default {
  computed: {
    medias: function () {
      return this.$store.medias
    }
  }
}
</script>

上面的示例假设您使用的是single file component结构。