Question

我只是不明白为什么它不起作用，因为它以前运行良好。基本上，我在这里所做的是从数据库中使用axios获取帖子，然后尝试将这些帖子推送到数组中。这是我收到帖子的地方：

BlogAPI.js

export const getPosts = () => {
   return API.get('/posts').then(response => {
       return response.data.posts;
   }).catch(error => {
       console.log('Something went wrong');
   })
}

Home.vue

import {getPosts} from '../blogApi';
  data() {
    return {
      posts: [],
      postId: ''
    }
  },
  mounted() {
    getPosts().then((result) => {
      result.forEach((element) => {
        this.posts.push(element)
      });
    });
  }

它抛出此错误：

Error in render: "TypeError: this is undefined"

如果我完全删除mounted函数，错误将消失。是什么导致此问题？

编辑 TEMPLATE

<template>
<div class="mainPage">
  <span v-if="this.$cookie.get('token')">
  <router-link class="float-right btn btn-success" to="create-post">Create Post</router-link>
  <button @click="logOut" class="btn btn-primary float-right">Log out</button>
  </span>
  <h4>? Latest Articles</h4>
  <div class="posts d-flex justify-content-center">
      <ul class="list-unstyled">
        <li v-for="(post, index) in posts.slice().reverse()" :key="post._id">? 
          <strong><router-link :to="{path: '/post/' +  post.slug +'/' + post._id}">{{post.title}}</router-link></strong> 
        - {{post.intro}} 
        <i><small>{{ post.createdAt }}</small></i>
        <span v-if="this.$cookie.get('token')">
        <button @click="removePost(post._id, index)" class="btn btn-danger">Remove</button>
        </span>
        </li>
      </ul>
  </div>
</div>
</template>

Answer 1

我没有检查它，但是我认为您应该在下面这样尝试：

export const getPosts = () => {
   return new Promise((resolve, reject) => {
      API.get('/posts')
       .then(response => resolve(response.data))
       .catch(error => {
          console.log('Something went wrong');
          reject(error));
       })
   });
}

import { getPosts } from '../blogApi';
export default {
  data() {
    return {
      posts: [],
      postId: ''
    }
  },
  mounted() {
    getPosts().then((result) => {
      result.forEach((element) => {
        this.posts.push(element)
      });
    });
  }
}

编辑：我添加了一个“）”我忘记了编辑：添加了导出默认值

Answer 2

错误实际上来自模板。它仅在具有安装功能时显示，因为否则没有要渲染的帖子。尝试将模板中的this.$cookie更改为$cookie。

this在模板中是不必要的，并且可能引起问题。如果您使用的是vue eslint插件，则可以打开this rule来捕获这些情况。

VUEJS forEach数组抛出未定义的

2 个答案: