Json problems with Vue.js

Asked

Viewed 164 times

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);          
        });

    }


});

Structure of my project;

inserir a descrição da imagem aqui

Why isn’t the object appearing on my browser consoles?

inserir a descrição da imagem aqui

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

After the suggested modification generated an error

was like this;

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

    }

take a look at the error;

inserir a descrição da imagem aqui

json vue.js

1 answer

2


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

inserir a descrição da imagem aqui

You must use the created which is called when the instance is created because you don’t have to wait for the mounted which is called when the component is inserted into the DOM.

  • i made a change to my post, and made the changes you suggested to make, but it generated an error in the browser consoles.

  • @wladyband if you are changing the question my is getting outdated... Which server do you have? PHP, Node? or you are running without server?

  • I’m not using web server, that’s the problem? need is running on a web server?

  • 1

    @wladyband yes, exactly. Put it on github or another site and use it from there. Otherwise you can use a import response from '../tua/pasta/dataServer' and in the created uses this.response = response, for now. So at least you have the code in the right place for the day the file is online.

  • that’s right, thank you very much.

Browser other questions tagged json vue.js

You are not signed in. Login or sign up in order to post.