i am trying to show some table data in view using vue js and laravel :
here is what i have tried :
this is comment controller :
public function index()
{
$comment = Comment::Latest()->paginate(10);
return new CommentResource($comment);
}
here is my vue js comment script
export default {
data: function() {
return {
comments: {}
}
},
created() {
this.loadComments();
}
,
methods: {
loadComments(){
axios.get("../api/comment").then(
({ data })=>(this.comments - data.data)
// response => this.comments = response.data
);
},
}
}
and finally the html part of vue html
<div v-for="comment in comments" >
{{ comment.title }}
</div>
the result is this error i get in browser :
[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of undefined"
and here
[Vue warn]: Property or method "comment" 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: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
and
TypeError: Cannot read property 'title' of undefined
btw i am sure that i have this because this is my api that i recice on
http://localhost:8000/api/comment
{"current_page":1,"data":[{"id":1,"title":"asd","body":"asd","user_id":1,"user_email":"asd","status":1,"created_at":null,"updated_at":null}],"first_page_url":"http:\/\/localhost:8000\/api\/comment?page=1","from":1,"last_page":1,"last_page_url":"http:\/\/localhost:8000\/api\/comment?page=1","next_page_url":null,"path":"http:\/\/localhost:8000\/api\/comment","per_page":10,"prev_page_url":null,"to":1,"total":1}
and when i console log this :
axios.get("../api/comment").then(({ data }) => (console.log(data)))
i get this result :
You're already extracting data from the response. So either you use the response object like this :
axios.get("../api/comment").then((response) => (this.comments = response.data.data)));
Or you extract the data property and use it.
axios.get("../api/comment").then(({ data }) => (this.comments = data.data)));
This is because axios returns a response object that has a data property that contains the server response. As your server response also has a data property that you want to use, you want to use response.data.data
Related
i tried to get my json data into my view using vuejs. i tried with api token. i generate a token with user register and saved it in a database row.
this is my controller
public function index()
{
$contact = Contact::all();
$contactcount = count($contact);
return json_encode([
'contactcount' => $contactcount,
]);
}
and this is my vue js method
fletchDetails(){
fetch('http://slfsnew.test/api/contact', {
params: {
api_token: this.api_token,
}
})
.then(res => res.json())
.then(res => {
this.contact = res.contactcount;
});
},
i tried to get my api token with a prop
data(){
return {
contact: '',
uri: 'http://slfsnew.test/api/contact',
api_token: this.user.api_token,
}
}
and i define my vuejs component like this.
<contactform #if(auth()->check())
:user="{{ auth()->user() }}"
#endif></contactform>
this api token gets my data property and finally it shows me this error.
admin:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at
position 0
how can i fix this. i want to get my count and shows it in a bootstrap card
<h3>{{ contact }} test</h3>
Running into a snag with trying to integrate my API with Vue/Axios. Basically, Axios is getting the data (it DOES console.log what I want)... But when I try to get that data to my empty variable (in the data object of my component) to store it, it throws an "undefined at eval" error. Any ideas on why this isn't working for me? Thanks!
<template>
<div class="wallet-container">
<h1 class="title">{{ title }}</h1>
<div class="row">
{{ thoughtWallet }}
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'ThoughtWallet',
data () {
return {
title: 'My ThoughtWallet',
thoughtWallet: [],
}
},
created: function() {
this.loadThoughtWallet();
},
methods: {
loadThoughtWallet: function() {
this.thoughtWallet[0] = 'Loading...',
axios.get('http://localhost:3000/api/thoughts').then(function(response) {
console.log(response.data); // DISPLAYS THE DATA I WANT
this.thoughtWallet = response.data; // THROWS TYPE ERROR: Cannot set property 'thoughtWallet' of undefined at eval
}).catch(function(error) {
console.log(error);
});
}
}
}
</script>
Because you're using .then(function(..) { }) this won't refer to the vue context this.
You have two solutions, one is to set a variable that references the this you want before the axios call, e.g.:
var that = this.thoughtWallet
axios.get('http://localhost:3000/api/thoughts').then(function(response) {
console.log(response.data); // DISPLAYS THE DATA I WANT
that = response.data; // THROWS TYPE ERROR: Cannot set property 'thoughtWallet' of undefined at eval
}).catch(function(error) {
console.log(error);
});
The other is to use the new syntax (for which you need to make sure your code is transpiled correctly for browsers that don't support it yet), which allows you to access this inside the scoped body of the axios then.
axios.get('http://localhost:3000/api/thoughts').then((response) => {
console.log(response.data); // DISPLAYS THE DATA I WANT
this.thoughtWallet = response.data; // THROWS TYPE ERROR: Cannot set property 'thoughtWallet' of undefined at eval
}).catch(function(error) {
console.log(error);
});
The reason this happens is because inside that function/then, this will be referring to the context of the function, hence there won't be a thoughtWallet property
this.thoughtWallet inside the .get method is referring to the axios object, not Vue's. You can simply define Vue's this on the start:
methods: {
loadThoughtWallet: function() {
let self = this;
this.thoughtWallet[0] = 'Loading...',
axios.get('http://localhost:3000/api/thoughts').then(function(response) {
console.log(response.data); // DISPLAYS THE DATA I WANT
self.thoughtWallet = response.data;
}).catch(function(error) {
console.log(error);
});
}
}
I'm trying to make a edit form thats pre-populated by my vuex model.
My idea was to bind the input to data, and populate data from the computed vuex getters.
Then when the user is done filling out the form, submit data to vuex and the server.
The problem is on load, data is empty so the template errors out.
Error in data(): "TypeError: Cannot read property 'title' of
undefined"
(simplified)
<template>
<input type="text" v-model= "title" >
</template>
<script>
...mapGetters('project', {
projectById: 'byId',
}),
data: function(){
return {
title: this.project.title
}
}
computed: {
project() {
var project = this.projectById(Number.parseInt(this.id))
return (project === undefined) ? {} : project;
}
</script>
I've followed the 'naive' implementation in the project README: https://github.com/mondora/asteroid-oauth-mixin
The only difference in my code from the example is changing the arrow function to a traditional for the usage of this.
asteroid.ddp.on("added", ({collection, id, fields}: { collection: string; fields: {}, id: string }) => {
if (collection === "meteor_accounts_loginServiceConfiguration") {
asteroid.loginServiceConfiguration = {
...asteroid.loginServiceConfiguration,
[id]: {
_id: id,
...fields
}
};
}
});
});
asteroid.getServiceConfig = function(providerName: string) { // ts file
return this.loginServiceConfiguration[providerName];
}
When I do asteroid.loginWith('google')
index.ts:50 Uncaught TypeError: Cannot read property 'google' of undefined
On the meteor backend I also installed meteor add accounts-base accounts-google because I assume this is a dependency.
What am I missing? Thanks!
I've tried adding DDP.loginServiceConfiguration = {} before the snippet above which resolves the error but creates a new error.
asteroid-oauth-mixin.js:787 Uncaught TypeError: Cannot read property 'clientId' of undefined
at getOauthClientId (asteroid-oauth-mixin.js:787)
at Object.getOptions (asteroid-oauth-mixin.js:720)
at Asteroid.loginWith (asteroid-oauth-mixin.js:104)
at LoginForm../src/routes/accounts/auth/LoginForm.tsx.LoginForm.handleLoginWithGoogle (
Also when I run meteor mongo should db.meteor_accounts_loginServiceConfiguration.find().count() be 0 ?
I needed to meteor add service-configuration and setup my configure-accounts.js and create a google clientId for the application.
This gets me to the point where I have a popup and can choose which user to auth with. Then I receive a new error about target origin mismatch, but I'm going to close this question as resolved.
I'm trying to load a binary file et read the content
For this, i'm using the load function to get my binary file and then,
I call a function that parse the binary file.
The problem is , I can access the datas
I keep havin this error :
Uncaught (in promise) TypeError: Cannot read property 'parsePeturboDATFiles' of undefined
at eval (eval at 79 (0.05b4762….hot-update.js:7), :128:11)
I did try to console.log my data to see what is going wrong, but I can print my data but I can't pass it to my other parsing functions ... I cannot figure why.
Here's my code by the way :
<template>
<div class="cde">
<h1></h1>
</div>
</template>
<script>
import jbinary from 'jbinary'
export default {
name: 'CDE',
data () {
return {
}
},
methods : {
parsePeturboDATFiles : function (data) {
console.log(data)
},
},
mounted : function () {
jbinary.load('./static/test.dat').then(function (data) {
console.log(data.view) //works fine
this.parsePeturboDATFiles(data.view) //get an error
})
}
}
</script>
The error is saying that it's not able to read the parsePeturboDATFiles property because the this variable is evaluating to undefined. Store a reference to this in another variable self and then use that to call parsePeturboDATFiles():
mounted : function () {
var self = this;
jbinary.load('./static/test.dat').then(function (data) {
self.parsePeturboDATFiles(data.view);
})
}