i am getting a problem of viewing my SINGLE ARTICLE with database-relationship using Vue js and laravel api. please help me.
this is my code of getting single article
export default {
data(){
return{
article: [],
}
},
mounted() {
axios.get(`/api/article/${this.$route.params.id}`).then(({ data }) => (this.article = data))
}
}
</script>```
BUT it's NOT WORKING WHEN I DISPLAY ON TOP LIKE ```{{article.id}}``` but if i try to ```{{article}}``` it will display my single article AND ALSO HOW CAN A DISPLAY IN MY ARTICLE THE AUTHOR BASE ON USER_ID PLEEEEAAASSSEEE HELP MEE. THANK YOU IN ADVANCE
You should put it inside v-for to iterate the data inside of arcticle.
<ul>
<li v-for="val in article">{{val.id}}</li>
</ul>
Much better if you use plural on your data so that it will be easily read.
Related
I just started using Vue2 with Laravel6 and got stuck when trying to understand how to use component method.
As I am totally new for Vue, I am using the official tutorial of Vue as a reference. What I learned from here(https://v2.vuejs.org/v2/guide/components.html) about Vue component instantiation is we give options to a component.(e.g. we give 'template:' options for HTML part.)
When I look at laravel6 codes of resouces/js/app.js, it looks something like this:
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
I looked at js/components/ExampleComponent.vue expecting to see some options declared there. However, there's no option in the ExampleComponent.vue file. Instead, I see <template></template> tag. Apparently, the <template></template> tag seems to work as 'template:' option.
I have two questions regarding above:
Does <template></template> tag have the same meaning as 'template:' option?
If question 1 is yes, are other options also replacable with corresponding tags? (e.g. Can I use <props></props> tag for 'props:' option? or <data></data> tag for 'data:' option?
Thanks in advance!
In Vue world, there are two popular types of defining a component
First Type
in this type, you add all of your HTML inside the template property
and the props add as attribute inside the component object to
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
Second Type
in this type you add your component logic in a separate file ends with .vue
for example in laravel there is an ExampleComponent.vue file you will find on
it just template tag just as a wrapper for your component content and your logic you can write it as it mentions below.
<template>
// some content here
</template>
<script>
export default {
props: [],
methods: {
},
data(){
return {
}
}
}
</script>
Finally
there is no tag called props or data
for more info read this article
In the event that you are developing your software using the Laravel framework and need to use the Vue library, you will face some obstacles, including how to access the files translation system provided by Laravel .
like how to access trans('home.var')
Add Language file like this
<messagings v-bind:language="{{ json_encode(trans('messages')) }}"></messagings>
then in vue component print like this
<h4>{{ this.language.messaging }}</h4>
1: pass trans as prop in blade normally just you need to encoding with json used json_encode() method :
<component :trans="{{json_encode(trans('home'))}}"></component>
2: in vue component page you need to decode json data first and set the translation data in some var :
export default {
props:['trans'],
data () {
return {
translation:[],
};
},
created(){
this.setTranslation()
},
methods:{
setTranslation(){
let decoded_trans = JSON.parse(this.trans);
this.transaction = decoded_trans;
}
}
3: Now you can access laravel trans normaly just be careful because vue will not detect if you call last node or first.
<template>
<div>
<h2>{{translation.header.login}}</h2> // this line in laravel mean : trans('home.header.login')
</div>
<template>
Finally I recently started learning vue , so this method may have some flaws, but We all strive to benefit :)
i'm trying to write my own blog software based on vue.js/laravel for learning purposes.
Background
I'm asking myself how i write vue.js components in which the paths/urls are not hard coded. In the following example i have a post-listing component which lists all posts from the database. The json data is returned by a laravel api route (e.g. /api/posts)
In the listing i use a link to a laravel view (e.g. /posts/{id}) which shows the actual body of a specific post with {id}.
Example
In laravel's api.php route file i can give a name to a specific route and use it with route('api.posts.index'). That's dynamic enough i guess?
api.php
Route::get('', 'Api\ApiPostsController#index')->name('api.posts.index');
index.blade.php
<post-listing postsview="{{ route('web.posts.show') }}" postsapi="{{ route('api.posts.index') }}"></post-listing>
PostListing.vue
In my vue component i refer to these properties postsview and postsapi
<template>
<div>
<h2 class="title is-2">Recent posts</h2>
<ul>
<li v-for="post in posts['data']" v-bind:key="post.id">
<a :href="postsview + '/' + post.slug" v-text="post.title"></a>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ["postsapi", "postsview"],
data() {
return {
posts: []
};
},
methods: {
getPosts() {
axios.get(this.postsapi).then(response => (this.posts = response.data));
}
},
mounted() {
this.getPosts();
}
};
</script>
The question
Is there a "best-practice" way or at least a better approach? Somehow i'm not happy with this solution, but lacking experience, i don't know where to begin.
Thanks.
There are many ways to achive this, this are a few options that I know of.
1: Use blade to pass the route to the component
<component route="{{ route('route_name') }}"></component>
2: You can save a global variable with all the routes you have defined.
You can use Route::getRoutes() to get all the routes
and add it to your window on your front end
3: Use a library,
This library does exactly what you are looking for I think.
https://github.com/tightenco/ziggy
If find other options please let me know, this is a common issue for most laravel developers.
I'm building a chat app, and in the cat vue component I have:
<template>
<div class="chat-app">
<Conversation :contact="selectedContact" :messages="messages" #new="saveNewMessage"/>
<ContactsList :contacts="contacts" #selected="startConversationWith"/>
</div>
then in the script part, in the methods array, I have:
saveNewMessage(message) {
this.messages.push(message);
},
Basically, there is an attribute in contact that I want to bring into the message to save it in message - the conversation_id. Is there a way to get contact into saveNewMessage()? I tried saveNewMessage(message, contact), but that didn't work. Thanks in advance!
You have access to all the data properties in the your component methods:
saveNewMessage(message) {
// access the selected contact
this.selectedContact
...
this.messages.push(message);
},
On my laravel home page I have a vue component like this
<new-tutor area-id="{{ $area->slug }}" tutor-id="{{ $tutor->slug }}" route="{{ route('tutor.show', [$area, $tutor]) }}"></new-tutor>
it returns all new tutors in a given area in individual bootstrap cards, and uses this controller
public function index(Request $request, Area $area, Profile $profile, Tutor $tutor)
{
$newTutors = Tutor::with(['user', 'area'])->inArea($area)->latestfirst()->get();
return response()->json($newTutor, 200);
}
I would like to be able to click on the tutors name and be sent to that tutors page, but I can't seem to get the tutor slug to pass though properly, and I am not sure why.
In my vue component I set the link like
<a :href="route">{{newTutor.name}}</a>
and I have props set up like this
props: {
areaId: null,
tutorId: null,
route: { type: String, required: true }
},
the slug does come through in a dd on newTutors, and Tutor.
Also note, I am using the same web route
tutor.show
in other blade templates, so I am mostly confident that that is not where the issue is.
if you using laravel + vuejs,You need add #{{}}
<a :href="route">#{{newTutor.name}}</a>