I've two components
1. viewAndUpdateDish.vue
2. updateDish.vue
In viewAndUpdateDish,
user pick a restaurant from the drop down
dishes of that particular restaurant will filter out and loaded to the table.
then the user hit the update button on a dish and go to updateDish.vue component and update the dish.
then after he update the dish user is redirected to the viewAndUpdateDish
When the user redirected to the viewAndUpdateDish that previously selected restaurant should be selected and dishes should loaded. This is my use case.
What I did so far is,
create a variable called pickedRestaurantId in vuex store and when user select a restaurant I updated that Id.
And in the updateDish component at the end of the update function, I emit a event like this, this.$root.$emit("clickedUpdate");
And then in the viewAndUpdateDish compoent I did
mounted() {
this.$root.$on("clickedSomething", () => {
this.loadDishes(this.pickedResViewAndUpdateDish);
});
},
But this doesn't seems work!
How do I achieve this using vuejs?
Hope my question is clear to you.
On your "viewAndUpdateDish" component after your update logic you can do the following:
this.$emit('clickedUpdate',yourResturantId);
then on your parent component make sure you are listening to the "clickedUpdate" event:
<update-dish #clickedUpdate="loadDishes($event)"></update-dish> .
Related
I have a page in which, through a form, i can redirect mywebsite to a page, that will show my apartments_list.
I will recover the apartaments list from my database, using data from filters with WHERE keyword, and show it in my apartments_list page.
My apartments_list page will be handled with Vue. That page must have the same filters as the other one. If i modify the filters, the result must change, there mustn't be refresh.
Which is the best way to manage this?
I thought to pass to the apartments_list page two different list:
One is the list_filtered, the other one is the complete list.
If i change the filter in my apartments_list page, through Vue, ill modify a copy of my complete list respecting the filters filtering.
There is a better way to do this?
Im using Laravel and Vue.
You can use Vue.js computed properties to achieve this on your Vue.js component.
Let's say you have the full list of Listings on your Vue.js data and want to filter it based on choices.
export default {
data() {
return {
selectedCity: "Istanbul",
listings: [], // Apartment Listings, will be filled by the API
};
},
computed: {
// a computed list of filtered listings
filteredListings() {
return this.listings.filter((listing) => {
return listing.city.toLowerCase().includes(this.selectedCity.toLowerCase());
});
},
},
};
Of course you need to edit filtering logic but this is a way to solve your need on Vue.js with a complte list of listings.
A better version can bu set up by watching filter changes and ask a list of filtered result for api on each change. To understand this you can check Vue.js Watchers.
Is it possible somehow to update Vuetify v-combobox items as the user is typing? I want to change the list of available items depending on what the users started typing, to create an address input with suggestions from a geolocation API.
This is what I tried: #update:search-input='fetchAddresses'
And in fetchAddresses: this.items = newListOfItems
However, while #update:search-input fires as expected, the combobox list will only be updated after losing focus. Can I somehow trigger it to be updated? (This may very well be an X/Y problem, so any hints about other approaches are welcome)
My current, ugly, hack is to force the whole combobox component to re-render with the current value set, and then refocus on it. (There is an activateMenu() method on the combobox that I could use to make sure the list reopened:
this.$nextTick(() => {
if (this.$refs.addressCombobox) {
this.$refs.addressCombobox.focus()
this.$refs.addressCombobox.activateMenu()
}
})
I'm using Vue 2.
In my case no-filter solved this problem
<v-combobox no-filter ... >
I have a list of items. Each item has a "complete" flag. If this flag is true, the item shows in view A. If it is false, it shows in view B. The items are retrieved via an API request, with a client-side filter applied through a computed method on the base dataset. So for view A it will return items with complete=true, for view B, it will return items with complete=false.
The complete flag is editable (via a checkbox). I have a watcher function on the complete field that results in a PATCH being made to the item to toggle the complete field on the server.
Here's the issue. Since the vue app is filtering items based on the complete flag, any time that field changes, the item is removed from the view, so the watcher never gets triggered and the PATCH is never made.
It makes sense that the item's removal would cause the filter function to be re-run, however it seems odd that the watcher is killed before it can run.
So my question is, how do I achieve this - a list of filtered objects where the filter criteria can be changed, and have that change recognized via a watcher or similar?
You're probably better off using an #input event on the checkbox, and tying that to the api call:
<input type="checkbox" #input="onCheckChange">
...
methods: {
onCheckChange() {
// Perform API call here.
}
}
I am emitting an event using an eventBus. I am looking to get the value from this on another component. At the moment, this triggers when something is selected, however, I want to be able to get the data from a Past event. For example, I have emitted the value when selecting an item. In another component, I wish to use this value again.
Here is the code to send the event:
clientId(client) {
eventBus.$emit("selected", client);
},
In the component, I am receiving it like this:
created() {
eventBus.$on("selected", index => this.client(index));
},
However it is not working for a past event.
I would like this to update a data value in a different component so that i can use the value.
How can I get the value of a past event?
You need a store for preserving data, simply inside your event bus update the store and then you can use a getter to retrieve the data from the store in any component. If you are not familiar take a look at the vuex docs.
I'm having a hard time figuring out how to get a component to reload after a sibling is updated. For instance, when I make a selection in the first component, I want the second component to "refresh" to account for the newly selected "state" data:
<c-select
dataEndpoint="/states.json"
errorMessage="Some error message..."
id="state"
message="Some message"
v-model="form.state"
:v="$v.form.state" />
Has the following dependency, so to speak:
<c-select
:dataEndpoint="`/${form.state}.json`"
errorMessage="Some other error message..."
id="county"
message="This field uses a local data source and **is required**"
v-model="form.county"
:v="$v.form.county" />
Once a state is selected or changed, I need to "dynamically" reload the appropriate endpoint to show the counties for that state in a second component. Right now, the only way I can make this work is with a v-if="form.state hack. But, if a user attempts to change the state again, the changes do not take effect in the "county" component. I would appreciate any help or advice on how to best solve this issue.
Here is a link to my vue codebase in Code Sanbox
Ok. Here is the result:
mounted is executed only ONCE, so after dataEndpoint has changed NO UPDATE action performed, that's why you should add watch to your c-list component and check if the entry has changed - update drop-down list:
watch: {
dataEndpoint() {
this.fetchAndSetJsonEndpoint();
}
},
Here is a working version of your code: https://codesandbox.io/s/64mj19r6zw