Level 46
You need to assign the data to hubs.
1 like
Aug 31, 2018
28
Level 15
Problem loop json in v-for vue.js
I have the following witch is returning the correct data i can see it with console.log()
<script>
export default {
data() {
return {
hubs: []
}
},
methods: {
read() {
axios.get('/api/hub').then(({ data }) => {
console.log("Went though" + data)
})
.catch((err) => console.error(err));
},
},
mounted() {
console.log('Component mounted.')
}
}
</script>
in the same file component eg the script above
<template>
<ul>
<ul id="example-1">
<li v-for="hub in hubs">
{{ hub }}
{{ hubs }}
</li>
</ul>
</ul>
</template>
The html is there but no value.
Level 15
How can i do that? I forgot to do it, what im trying is not working right now?
Level 47
axios.get('/api/hub').then(response => {
this.hubs = response.data
}).catch()
and , you should show your controller function . This example only works if you return a json collection directly without naming it .
Level 46
this.hubs = data
Level 15
I return an json, return response(Hub::all()->jsonSerialize()); the example is not working json looks like:
{hub_id: 1, name: "Name", address: 2, mul_address: 3, multicast_zip: 4, Something: "Last Name",…}
1
:
{hub_id: 2,` . . .. . . . . . . .
Level 47
in your controller , try this :
return response()->json([
'collection' => Hub::all()
]);
in your vue file :
axios.get('/api/hub').then(response => {
this.hubs = response.data.collection
}).catch()
or , in a brutal way , you can do :
return Hub::all();
axios.get('/api/hub').then(response => {
this.hubs = response.data
}).catch()
1 like
Level 15
@MaverickChan still on the html i don't see anything on console.log i see the json. Is something wrong with my html ?
Level 47
yes , remove {{ hubs }}
only display the property you need
for example :
name: {{ hub.name }}
Level 15
One thing is not clear to me, this code should be inside the component file or where we init the component ?
Level 15
I got this error what does it mean @MaverickChan?
main.js:36687 [Vue warn]: Property or method "hubs" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See
Level 47
these codes should be in the same vue file .
<script>
export default {
data() {
return {
hubs: []
}
},
methods: {
read() {
axios.get('/api/hub').then(response => {
this.hubs = response.data
})
.catch((err) => console.error(err));
},
},
mounted() {
console.log('Component mounted.')
}
}
</script>
<template>
<ul>
<ul id="example-1">
<li v-for="hub in hubs">
name : {{ hub.name }}
</li>
</ul>
</ul>
</template>
Level 15
@MaverickChan i get nothing even not the request now i cant see it in Network. I just see the html. Very annoying idk what im doing wrong.
Level 15
Btw this is working when i run it in mounted()but won't in methods() as read
Level 18
Just incase make sure you are usings methods: {} it is NOT methods(){}. Maybe this is causing you issues?
Level 15
Level 18
Oh okay, thats fine, you just said in a comment about methods() just wanted to cover that base is all. Ive used methods() before and it did not make things happy haha.
Level 47
@petritr did you call the method??
you need to call read() to get data.
Level 15
How should i call it @MaverickChan ?
Level 47
in mounted
mounted () {
this.read()
}
1 like
Level 15
@MaverickChan why is needed this? I want to know anytime i do any thing similar i would need to call it in mounted ?
Level 15
Then i get
TypeError: this.ready is not a function soooooo annoying...
Level 15
BTW it's working with created() method, so my custom method is not called/fired, show to fire ? buuuuhhhh?
Level 47
show whole code , you are hiding something
Level 15
This is working (method created() ):
<script>
export default {
data() {
return {
hubs: [],
}
},
created() {
axios.get('/api/hub').then(({ data }) => {
console.log(data)
this.hubs = data;
});
},
mounted() {
console.log('Component mounted.')
}
}
</script>
This is not working (having read() inside methods ):
<script>
export default {
data() {
return {
hubs: []
}
},
methods: {
read() {
axios.get('/api/hub')..then(({ data }) => {
console.log(data)
this.hubs = data;
})
},
},
mounted() {
console.log('Component mounted.')
}
}
</script>
Level 47
like i said before , you need to call the method in your mounted.
mounted () {
this.read()
}
just that line, no other code
Level 15
@MaverickChan I already replied on that i would get an error:
TypeError: this.ready is not a function
Level 47
this.read , not this.ready
please check your spell or change another name , whatever it is
Please or to participate in this conversation.