Vue компонент не показывает данные

Question

Axios загружает данные без проблем, не показывает никаких данных, Laravel Mix создает без ошибок.

У меня есть следующий код:

index.html (body)

<div id="app">
    <posts></posts>
</div>

В app.js я использую это:

import Vue from 'vue';

// global declare axios
window.axios = require('axios');

import Posts from './components/Posts';
Vue.component('posts', Posts);

new Vue({
    el: '#app',

    props: {
        posts:[{
            userId: [Number],
            id: [Number],
            title: [String, Number]
        }]
    }
});

В компоненте Posts.vue я создаю шаблон и скрипт, загружающий данные при монтировании:

<template>
    <ul>
        <li v-for="post in posts" v-text="post.title"></li>
    </ul>
</template>

<script>
    export default {


        data: function() {
            return {
                posts: null,
            }
        },

        // when stuff is loaded (document ready)
        mounted: function() {

            // use placeholder data for tests, capture asynchronous data from site using this.
            axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => this.posts = response.posts)
                .catch(error => this.posts = [{title: 'No posts found.'}])
                .finally(console.log('Posts loading complete'));
        },
    }
</script>

Таким образом, данные должны отображаться в виде списка ul:

<ul>
  <li>
     title
  </li>
  <li>
     title
  </li>
  <li>
     title
  </li>
</ul>

Answer 1

Попробуйте код ниже, я прокомментировал биты, которые нужно изменить.

data() {
    return {
        posts: [] // this should be an array not null
    };
},

// you can do this on created instead of mounted
created() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
            this.posts = response.data; // add data to the response
        });

Answer 2

` Here "this.post" not take it has instance in axios call.So you have follow like this. `

var vm=this;

axios.get('https://jsonplaceholder.typicode.com/posts') .then(response => vm.posts = response.posts) .catch(error => vm.posts = [{title: 'No posts found.'}]) .finally(console.log('Posts loading complete'));

Answer 3

    <div id="app">
       <router-view>
          <posts></posts>
       </router-view>
    </div>

    <template>
        <ul>
            <li v-for="post in posts" v-text="post.title">
                {{post}}
           </li>
        </ul>
    </template>


    data: function() {
                return {
                    posts:[],
                }
            },




//app.js

import Vue from 'vue';

// global declare axios
window.axios = require('axios');




Vue.component('posts',
  require('./components/Posts.vue'));

const app = new Vue({
    el: '#app'
});