当我单击列出所有项目的Vue时如何显示项目Vue？

Question

我是vueJS / Nuxt的新手，我使用wordpress作为无头CMS构建博客。 WordPress公开了来自Rest API的数据，在vuejs中，我使用这些数据并将其显示在页面上。我有这个项目结构：

当我从portraits / index.vue移到portraits / _slug.vue时，我遇到了一个问题。-portraits / index.vue显示我所有自定义帖子类型的肖像。这是代码：

   <template>
      <div>
        <app-masthead></app-masthead>
        <div class="portraits">
          <main>
            <div class="portrait" v-for="portrait in sortedPortraits" :key="portrait.id">
              <h3>
                <a :href="`portraits/${portrait.slug}`">{{ portrait.title.rendered }}</a>
              </h3>
              <small>{{ portrait.date | dateformat }}</small>
              <div v-html="portrait.excerpt.rendered"></div>
              <a :href="`portraits/${portrait.slug}`" class="readmore slide">Read more ⟶</a>
            </div>
          </main>
          <aside>
            <h2 class="tags-title">Tags</h2>
            <div class="tags-list">
              <ul>
                <li
                  @click="updateTag(tag)"
                  v-for="tag in tags"
                  :key="tag.id"
                  :class="[tag.id === selectedTag ? activeClass : '']"
                >
                  <a>{{ tag.name }}</a>
                  <span v-if="tag.id === selectedTag">✕</span>
                </li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
    </template>

    <script>
    import AppMasthead from "@/components/AppMasthead.vue";

    export default {
      components: {
        AppMasthead
      },
      data() {
        return {
          selectedTag: null,
          activeClass: "active"
        };
      },
      computed: {
        portraits() {
          return this.$store.state.portraits;
        },
        tags() {
          return this.$store.state.tags;
        },
        sortedPortraits() {
          if (!this.selectedTag) return this.portraits;
          return this.portraits.filter(el => el.tags.includes(this.selectedTag));
        }
      },
      created() {
        this.$store.dispatch("getPortraits");
      },
      methods: {
        updateTag(tag) {
          if (!this.selectedTag) {
            this.selectedTag = tag.id;
          } else {
            this.selectedTag = null;
          }
        }
      }
    };
    </script>

    <style lang="scss">


    </style>

- portraits/_slug.vue display one item portrait. Here is the code : 
<template>
  <main class="portrait individual">
    <h1>{{ portrait.title.rendered }}</h1>
    <small class="date">{{ portrait.date | dateformat }}</small>
    <section v-html="portrait.content.rendered"></section>
  </main>
</template>

<script>
export default {
  computed: {
    portraits() {
      return this.$store.state.portraits;
    },
    portrait() {
      debugger
      return this.portraits.find(el => el.slug === this.slug);
    }
  },
  data() {
    return {
      slug: this.$route.params.slug
    };
  },
  created() {
    this.$store.dispatch("getPortraits");
  }
};
</script>

<style lang="scss" scoped>

</style>

当我单击readmore时，出现以下错误：

TypeError
Cannot read property 'title' of undefined

并且此方法未调用

portrait() {
      debugger
      return this.portraits.find(el => el.slug === this.slug);
    }

我的肖像还没有初始化！我想念的是什么吗？谢谢

Answer 1

您可以用这种方式写。

<template>
  <main class="portrait individual">
    <h1 v-if="portrait">{{ portrait.title.rendered }}</h1>
  </main>
</template>

<script>
export default {
  computed: {
    portraits() {
      return this.$store.state.portraits;
    },
    portrait() {
      return this.portraits.find(el => el.slug === this.slug);
    }
  },
  data() {
    return {
      slug: this.$route.params.slug
    };
  },
  created() {
    this.$store.commit("getPortraits");
  }
};
</script>

似乎未调用this.$store.dispatch("getPortraits");。

相反，You can use中的this.$store.commit("getPortraits"); created()。

在store / index.js中。

export const state = () => ({
  portraits: []
});

export const mutations = {
  getPortraits(state) {
    state.portraits.push({
      slug: "a",
      title: {
        rendered: "hello"
      }
    });
  }
};

我在this sandbox中尝试过。

以另一种方式，您还可以在data()对象中使用肖像数据。

<template>
  <main class="portrait individual">
    <h1 v-if="portrait">{{ portrait.title.rendered }}</h1>
  </main>
</template>

<script>
export default {
  computed: {
    portrait() {
      return this.portraits.find(el => el.slug === this.slug);
    }
  },
  data() {
    return {
      slug: this.$route.params.slug,
      portraits: this.$store.state.portraits
    };
  },
  created() {
    this.$store.commit("getPortraits");
  }
};
</script>

并且在h1标记中使用v-if="portrait"，因为肖像对象可能是未定义的值或空数组。