Vue中从数组中获取数据

Question

现在，在我的页面中显示的数据是一个数组，如下面的 sn-p：

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

这是我现在唯一拥有的：

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 结构。