created(){axios.get 方法在尝试显示数据库中的内容时不起作用

Question

**我的 rout 文件，当我直接在 URL 中输入帖子时，它会显示帖子，但在 app.js 中使用创建的方法时，它什么也不显示**

Route::get('/posts', function () {
$posts_json = DB::table('posts')
->orderBy('posts.created_at','desc')->take(4)->get();return $posts_json;}

我的 app.js 文件

   const app = new Vue({
    el: '#app',
    data: {
    msg: 'make post',
    content:'',
    posts: [],
    bUrl: 'http://localhost/pathikhome',
    },
    ready: function(){
    this.created();
    },
    created(){
    axios.get(this.bUrl +'/posts')
    .then(response => {
    console.log(response); 
    this.posts = response.data;
    })
    .catch(function (error) {
    console.log(error);
    });   
    },

    methods: {
    addPost(){
    axios.post(this.bUrl +'/addPost', {
    content:this.content
    })

如果不成功

    .then(function (response) {
    console.log(response);
    })
    .catch(function (error) {
    console.log(error);
    });
    }
    }});

Answer 1

ready 不再受支持。那是Vue v1。你的新方法是mounted。见https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram和https://vuejs.org/v2/guide/migration.html#ready-replaced

另外 data 是一个返回数据对象的函数，所以 if 应该是这样的：

data: function() {
   return {
      msg: 'make post',
      content: '',
      posts: []
  }
}

Answer 2

在你的 axios 的 url 中删除 this.bUrl：

created(){
    axios.get('/posts')
    .then(response => {

编辑： 尝试删除ready函数：

ready: function(){
   this.created();
},

你的data() 里面应该有一个return：

data() {
    return{
        msg: 'make post',
        content:'',
        posts: [],
        bUrl: 'http://localhost/pathikhome',
    }
},