vue.js - 当我单击列出所有项目的 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 ⟶&lt;/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">✕&lt;/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");没有被调用。

取而代之的是，您可以使用 this.$store.commit("getPortraits");in created()。

在store/index.js中。

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

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

我在这个沙箱里试过。

在另一种方式中，您也可以在对象中使用肖像数据。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>

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