Why is the data upload not working?

J

JonGalt2017-04-14 16:40:04

Vue.js

JonGalt, 2017-04-14 16:40:04

Why is the data not being loaded into the template?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <template v-for="post in posts">
           <span>{{ post.title }}</span><br>
           <span>{{ post.body }}</span>
        </template>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
    <script type="javascript">
        var app = new Vue({
            el: '#app',
            data: {
                posts: []
            },
            created: function() {
              this.$http.get('https://jsonplaceholder.typicode.com/posts').then(
                function (response) { // Success.
                    this.posts = response
                },
                function (response) { // Error.
                  console.log('An error occurred.');
                }
              );
            }

        })
     </script>
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

L

lem_prod, 2017-04-14
@JonGalt

for $http to work, you need to connect

<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>

N

Nikolay Semenov, 2017-04-15
@nickola105

see the implementation here

B

Bogdan Dukhevich, 2017-04-27
@landen13

Connect axios for Ajax requests instead of vue-resource (which has already been excluded from the list of official plugins). axios is recommended even in the official vuejs documentation.