Json's problems with Vue.js

0

note below;

My page

<!DOCTYPE html>
<html>
<head>
    <title>My books</title>
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.css">
</head>

<body>
<div class="container" id="app">
    <div class="row">
        <h1>Book</h1>
    </div>

<div class="row">
    <table class="table">
        <thead>
            <tr>
                <th>id</th>
                <th>Title</th>
                <th>Nome</th>
            </tr>   
        </thead>    
        <tbody>
            <tr>
                <td>1</td>
                <td>teste boook<td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>


</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="js/app.js"></script>
</body>
</html>

My Json file

{
    "id":1,
    "title":"feira da rua",
    "value":50,
    "descricao":"dcjndkjscnkjdsnckjdnsckjndskjcn"
}

My Javascript file

var app = new Vue({
    el:'#app',
    data:{
        banco:[]

    },
    methods:{

    },
    ready:function(){
        var self = this;
            self.$http.get('dataServer.json').then(function(response){
            console.log(response);          
        });

    }


});

My project structure;

Whyisnottheobjectappearingontheconsolesofmybrowser?

=================================================================

Afterthesuggestedmodification,yougeneratedanerror

Itlookslikethis;

created:function(){varself=this;self.$http.get('dataServer.json').then(function(response){console.log(response);});}

takealookattheerror;

    
asked by anonymous 20.09.2017 / 20:24

1 answer

2

Vue has no native method ready , the "life cycle" of a instance is:

You should use the created that is called when the instance is created, since you do not have to wait for the mounted that is called when the component is inserted into the DOM.

    
20.09.2017 / 21:20