I am trying to make a search bar in my index component that is loading other components to show the results of the search and it is working for the first time when the route in any other url except the /search route which is the results page but when I am trying to do other search created() doesn't work / not called again with the new parameter's value .
index.vue
methods: {
search() {
this.$router.push({ name: "search", params:{id:this.words}})
}
}
component search.vue
data() {
return {
videos: null
}
},
created() {
axios.get('/api/search/'+this.$route.params.id)
.then(response=>(this.videos = response.data.data))
.then(document.title='search - '+this.$route.params.id)
}
i solved it
it is should be
window.location.replace("/search/"+this.words);
instead of
this.$router.push({ name: "search", params:{id:this.words}})
Related
I want to be able to update the URL when a user clicks on a tab defined in v-tab. That way, the url can be shared. When another user uses that shared url, they should be able to start with the same tab that's defined in the URL. Is this possible?
You can just attach a method to the #click event of the tab element, which will change the route on click.
If you want to automatically change the selected tab when the page is loaded, you can get the current route and simply set the tab in mounted() hook:
<v-tabs
v-model="selectedTab"
>
<v-tab
v-for="tab in tabs"
#click="updateRoute(tab.route)
>
...
data () {
return {
selectedTab: 0,
tabs: [
{
name: 'tab1',
route: 'route1'
},
{
name: 'tab1',
route: 'route1'
}
]
}
},
mounted() {
// Get current route name
// Find the tab with the same route (property value)
// Set that tab as 'selectedTab'
const tabIndex = this.tabs.findIndex(tab => tab.route === this.$route.name)
this.selectedTab = tabIndex
},
methods: {
updateRoute (route) {
this.$router.push({ path: route })
}
}
I am Using Laravel 5.5 and Vue.js 2.0
When i open example.com and click on Display Items then this url triggered example.com/items
and here are results
and When i open directly this url example.com/items it shows me only json response that i am getting from Laravel without creating any view in html (Vue.js).
See Below:
How Can I Get Exact Results in Browser by Visiting Direct Urls like example.com/items without visiting example.com first.
Updated
Here is My Vue routes.js File
import Example from './components/ExampleComponent.vue'
import CreateItem from './components/CreateItem.vue'
import DisplayItem from './components/DisplayItem.vue'
import EditItem from './components/EditItem.vue'
export const routes = [
{ name: 'Example', path: '/', component: Example },
{ name: 'CreateItem', path: '/items/create', component: CreateItem },
{ name: 'DisplayItem', path: '/items', component: DisplayItem },
{ name: 'EditItem', path: '/items/:id/edit', component: EditItem }
];
Getting Response From Laravel Like This
$items = Items::all();
// dd($items);
return response()->json($items);
DisplayItems.vue File Vue.js Code
<script>
export default {
data(){
return{ items: [] }
},
created: function()
{
this.fetchItems();
},
methods: {
fetchItems()
{
this.axios.get('/items').
then(response => {
this.items = response.data;
});
},
deleteItem(id)
{
let uri = '/items/'+id;
this.items.splice(id, 1);
this.axios.delete(uri);
}
}
}
</script>
Laravel is returning a JsonResponse from the route /items, hence why you see JSON in the browser. Vue binds the JSON to dom elements.
You would need to modify the route to /items so that it returns JSON if $request->wantsJson() and a regular Response if non ajax.
[BEHAVIOUR]
laravel have it's own server with routes.
When you trying to refresh custom Vue.js route, it shows overrides Vue.js routes with laravel route and shows you only JSON response.
[SOLUTION]
You should create Vue.js application and Use laravel-echo or laravel broadcasting and use laravel api.
Now make each request from Vue to direct API and Get Response.
I've tried to follow the following tutorial in laravel 5.3 and vue 2.0:
https://www.youtube.com/watch?v=CeXDx4hdT1s
Products.vue:
<my-product :key="product.id"
v-for="product in products"
:authenticatedUser="authenticatedUser"
:product="product">
...
computed: {
authenticatedUser() {
this.$auth.getAuthenticatedUser()
}
},
Product.vue:
export default{
props: ['product', 'authenticatedUser']
}
Auth.js
setAuthenticatedUser(data){
authenticatedUser = data;
},
getAuthenticatedUser(){
return authenticatedUser;
}
Navbar.vue:
export default {
data() {
return {
isAuth: null
}
},
created() {
this.isAuth = this.$auth.isAuthenticated();
this.setAuthenticatedUser();
},
methods: {
setAuthenticatedUser() {
this.$http.get('api/user')
.then(response => {
this.$auth.setAuthenticatedUser(response.body);
console.log(this.$auth.getAuthenticatedUser());
})
}
}
I try to pass the authenticated user which is called in the Products.vue within the Product.vue
For that, at each login, the setAuthenticated method in the Navbar.vue is called where the authenticated user should be set in the corresponding method.
But when I check the property in the debugger of the browser, it's written Props authenticatedUser: undefinded. In fact the authenticated user is not shown.
Any ideas what it's missing?
In computed you need to return the value you want the property to take.
It should be:
computed: {
authenticatedUser() {
return this.$auth.getAuthenticatedUser()
}
},
I may be wrong in my understanding of props but I can't seem to be able to pass a prop to a component and then use the value in a method?
So far I am able to get data from a fixed API and output everything from the vue component, now I would like the api source to be dependent on the variable passed to the component.
My blade template:
<projectstatuses :userslug="this-user" :projectslug="this-project"></projectstatuses>
Then in my Vue Component:
export default {
props: {
userslug: {
type: String,
default: "other-user",
},
projectslug: {
type: String,
default: "other-project",
}
},
data() {
return {
statuses : [],
}
},
created(){
this.getStatuses();
},
methods : {
getStatuses(){
console.log(this.userslug);
console.log(this.projectslug);
axios.get('/api/' + this.userslug + '/' + this.projectslug)
.then((response) => {
let statuses = response.data;
this.statuses = statuses.statuses;
console.log(response.data.statuses);
})
.catch(
(response) => {
console.log('error');
console.log(response.data);
}
);
}
}
}
In the console I get the default values, if I remove the default values I get undefined. I have tried removing the api method and simply console logging the values but I still get undefined. Is what I'm trying to do possible or have I completely misunderstood how props work?
You are trying to bind this-user and this-project as a properties not as values ,
So you will need to define them in the data object in the parent,
but if you want to pass this-user and this-project just as value remove the : try that:
<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>
Dynamic-Props
Don't add : in your template:
<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>
Vue will expect there's data bound to this-user.
Problem: Although from the Vue DevTools I am passing the prop correctly and the router-view component has access to the data that it needs and in the correct format, whenever I try to access any of the data properties from within the template I get Uncaught TypeError: Cannot read property 'name' of null. It's really confusing because from the DevTools everything is a valid object and the properties are not null.
App.js
const game = new Vue({
el: '#game',
data: function() {
return {
meta: null,
empire: null,
planets: null
};
},
created: () => {
axios.get('/api/game').then(function (response) {
game.meta = response.data.meta;
game.empire = response.data.empire;
game.planets = response.data.planets;
});
},
router // router is in separate file but nothing special
});
main.blade.php
<router-view :meta="meta" :empire="empire" :planets="planets"></router-view>
script section of my Component.vue file
export default {
data: function() {
return {
}
},
props: {
meta: {
type: Object
},
empire: {
type: Object
},
planets: {
type: Array
}
}
}
Any ideas? Thanks in advance.
Because of your data is async loading so when my Component.vue renders your data in parent component may not be there. So you need to check if your data is loaded. You can try this code:
{{ meta != null && meta.name }}
PS: Your created hook should be:
created() {
axios.get('/api/game').then((response) => {
this.game.meta = response.data.meta;
this.game.empire = response.data.empire;
this.game.planets = response.data.planets;
});
},
router-view is a component from view-router which can help render named views. You can not pass empire and planets to it as those are props of your component.
You have to have following kind of code to pass empire and planets to your component:
<my-component :meta="meta" :empire="empire" :planets="planets"></my-component>
You can see more details around this here.