While console logging an array passed from blade to vue I get this error.
In index.blade I have this
<books :books="{{ $books }}"></books>
And my Books.vue is
<template>
<!-- <tbody class="tbody">
<book-row v-for="book in books" :key="book.id"></book-row>
</tbody> -->
</template>
<script>
import BookRow from './BookRow.vue';
export default {
props: ['books'],
components: {BookRow},
data() {
return {
}
},
mounted() {
console.log(this.books);
},
}
What is the problem?
I would appreciate any help.
in your blade file remove :
<books books="{{ $books }}"></books>
But, instead of using the above method i would suggest you to use axios or fetch inside vue. Get data via api.
Related
I am new to vue.js and recently been assigned a project to learn it and refactor old code to vue.js like some of the existing pages already have been and I am having some issues. vue2
My question:
I have a get request with a controller that has a response something like this:
return Response::view('somebladefile', ['title' => 'some_title']);
Within the blade file I include a js file which will be responsible for vue
<script src="{{ cdnMix('somefile.js') }}"></script>
somefile.js contents:
const IndexPage = Vue.component('indexpage',require('./somepath/IndexPage.vue').default);
window.indexPageInstance = new IndexPage().$mount('#vuecontainerid');
So now within IndexPage.vue i would like to access variable 'title' that I passed with the response to my blade file originally. What would be the best way one would go about it? Tried few ways I found on YT/Google but without success, this is my code currently, any pointers would be appreciated, thanks!
<template>
<HeaderComponent></HeaderComponent>
</template>
<script>
const HeaderComponent = require('./somepath/HeaderComponent.vue').default;
export default {
name: 'indexpage',
props: ['data'],
components: {
'HeaderComponent': HeaderComponent,
},
data: function() {
return {
// why doesn't it work!!: '',
}
},
mounted: function() {
console.log(this.data);
}
}
</script>
Vue works, but I can't seem to be able to access 'title' variable.
Also I would like to be able to access 'title' within other components like the HeaderComponent I have within indexpage
this is Vue js component please help me to get data in template. getting data from vue js api in console i got undefined. Not getting blogList Data please help to get blog list data.
my api is correct and fetch data.
<template>
<div v-for="blog in blogList">
Hii i am {{ blog.name }} , {{ blog.mail }}
</div>
</template>
<script>
import ApiRequest from "../../js/api-request";
export default {
data() {
return {
blogList: '',
};
},
created() {
const request = new ApiRequest('/api/blog/list', (blogList) => {
this.blogList = blogList;
console.log(blogList);
}, () => {
//
});
request.get();
}
};
</script>
I want create global method to translate message using Laravel-JS-Localization
But when i call the method using vue mustache got an error like this:
Property or method "trans" is not defined on the instance but referenced during render.
Make sure that this property is reactive.
Here my laravel app.js code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('dashboard', require('./components/Dashboard').default);
const app = new Vue({
el: '#vue',
methods: {
trans: function (key) {
return Lang.get(key);
},
},
});
Dashboard.vue code :
<template>
<p>{{ trans('common.welcome') }}</p>
</template>
<script>
data () {
return {
name: '',
}
},
</script>
dashboard.blade.php code :
..........
<div class="col-9" id="vue">
<dashboard></dashboard>
</div> <!--c end col-8 -->
..........
I would probably go with creating a Plugin. For example
Vue.use({
install (Vue) {
Vue.prototype.$trans = Lang.get
}
})
Adding this to your app.js code before creating any components or new Vue({...}) will mean all your components will have access to the $trans method.
Alternatively, you can create a Global Mixin but these aren't strongly recommended.
Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components
Vue.mixin({
methods: {
trans (key) {
return Lang.get(key)
}
}
})
I have Laravel in api folder and Vue is in the root folder, and I try to pass data from Laravel to Vue Components.From what I find I must use axios for this but I didn't know how. I am looking for a solution for some hours now, but nothing worked. PS. I didn't do anything in blade till now. Any help, please !?
api/routes/api.php
Route::get('/content', 'ContentController#index');
ContentController
public function index() {
$customers = Customer::all();
return $customers;
}
Vue component
<template>
</template>
<script>
import axios from 'axios'
export default {
name: "Home"
};
</script>
Since you created your Vue app using the Vue CLI, running vue serve starts your application at a local URL, you need to have your Laravel API app running as well so you can request data from it using Axios in Vue components
cd api
php artisan serve
Then in your template, you should have something like this
<template>
<div></div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
databaseConfiguration: "",
errors: {}
};
},
name: "Home",
created: function() {
axios
.get("http://127.0.0.1:8000/api/content")
.then(response => {
this.databaseConfiguration = response.data;
console.log(response.data);
})
.catch(error => {
this.errors.push(error);
console.log(error);
});
}
};
</script>
Here's a full working example app on GitHub
Hope this helps
I have const:
export const globalUser = new Vue({
created: function(){
this.getActualUser();
},
data: {
ActualUser: {name:'',meta:'',tipo:''}
},
methods:{
getActualUser: function(){
var urlMeta='usuarioActual';
axios.get(urlMeta).then(response=>{
this.ActualUser=response.data;
});
}
}
});
Now i'm importing that in a component of vue js
import {globalUser} from '../app.js'
Here is my data:
data:function(){
return {
usuarioActual:globalUser.ActualUser,
anotherData:{}
}
}
This returns me:
"usuarioActual": {
"name": "",
"meta": "",
"tipo": ""
}, the data is empty.
What i want is the returns me data after the method getActualUser run:
ActualUser: {name:'currentName',meta:'currentDat',tipo:'currentType'}
It works well:
axios.get(urlMeta).then(response=>{
this.ActualUser=response.data;
});
I did it in a wrong way, maybe it will work.
I get a different solution:
Instead of using data in components, i'm using "props".
I don't need to import, just called the props in the blade template of laravel, there i can use #elements from laravel.
Props in component:
props:{
usuario:String
},
Now i'm using that:
#extends('layouts.app')
#section('content')
<user-component usuario="{{ Auth::user()->name }}"></user-component>
#endsection
Works well, if you need more data u can add a function in the Model.
Now i can use that in my template of component
<template>
<tr v-if="{{usuario}} =='Admin'">