Using Vue2, I have a list of books on a page where the details are shown via a child component. The user can delete one of the books from within the child component. I want the list to update after the delete. I'm using an $emit from the child after the record is deleted from the database. I can see from the console that the $emit is sent with the correct new list of books in the payload. However, the callback function in the parent isn't being fired. I can tell because the console.log I have at the beginning of the callback isn't showing up in the console.
Any suggestions on what I'm doing wrong?
Here's what's in the parent:
<div v-for="book in books" :key="book.BookID" #book-refresh="refreshbooks">
<BookCard :book="book" />
</div>
Here's the callback function:
async refreshbooks(newbooks) {
console.log('in books.vue, starting refreshBooks, newbooks is: ', newbooks)
this.$set(this, "books", newbooks)
.bind(this)
},
Here's what's in the function (in the child component) that fires the $emit:
async deleteBook(bookID) {
this.dialogdelete = false
await (EventService.deleteBook(bookID, this.user.UserID))
.then((newbooks) => {
this.$emit('book-refresh', newbooks)
}
)
},
TJ, thank you for the suggestion. I did as you said and created the mre which worked. I then went back to see what was different. The only things I changed were the name(s) of the functions. I changed the book-refresh and refreshbooks all to a simple refresh. Now it works perfectly. I haven't taken the time to see if I just didn't have the names matched up properly or if there's just something about hyphenated names? I did read somewhere yesterday that mixed case makes a difference, so maybe? In any case, keeping it super simple has helped me to move on.
Thanks again for helping me see the forest instead of the trees!
Related
I have made some sandbox code of my problem here:
https://codesandbox.io/s/clever-zeh-kdff1z
<template>
<div v-if="started">
<HelloWorld :msg="msg" #exit="exit" #remake="remake" />
</div>
<button v-if="!started" #click="started = !started">start</button>
</template>
<script>
import HelloWorldVue from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
HelloWorld: HelloWorldVue,
},
data() {
return {
started: false,
msg: "Hello Vue 3 in CodeSandbox!",
};
},
methods: {
exit() {
this.started = false;
},
remake() {
this.msg = this.msg + 1;
//this code should recreate our child but...
this.exit();
this.started = true;
// setTimeout(() => {
// this.started = true;
// });
},
},
};
</script>
So! We have 2 components parent and child. The idea is simple - we have a flag variable in our parent. We have a v-if statement for this - hide / show an element depend on the flag value "false" or "true". After we toggle the flag - the child component should be recreated. This is the idea. Simple.
In our parent we have a button which will set the flag variable to "true" and our child will be created and will appear on our page.
Ok. Now we have 2 buttons inside our child.
One button is "exit" which is emit an event so the flag variable of parent will set to "false" and the elemint will disappear from our page(It will be destroyed btw). Works as charm. Ok.
The second button "remake". It emit event so the flag variable will be just toggled (off then on). Simple. We set to "false", we set to "true". So the current child should dissapear, and then imediatly will be created new one.
But here we are facing the problem! Ok, current child is still here, there is no any recreation, it just updates current one... So in child I have checked our lifecycle hooks - created and unmounted via console.log function. And the second button dont trigger them. Start->Exit->Start != Start->Remake.
So can anyone please explain me why this is happening? I cant figure it out.
Interesting thing, if you can see there is some asynchronous code commented in my demo. If we set our flag to "true" inside the async function the child will be recreated and we will see the created hook message but it seems like crutch. We also can add a :key to our component and update it to force rerender, but it also seems like a crutch.
Any explanations on this topic how things work would be nice.
Vue re-uses elements and components whenever it can. It will also only rerender once per tick. The length of a 'tick' is not something you should worry yourself about too much, other than that it exists. In your case the this.exit() and this.started = true statements are executed within the same tick. The data stored in this.started is both true in the last tick and the current tick as it does not end the tick in between the statements, and so nothing happens to your component.
In general you should think in states in Vue rather than in lifecycles. Or in other words: What are the different situations this component must be able to handle and how do you switch between those states. Rather than determining what to do in which point in time. Using :key="keyName" is indeed generally a crutch, as is using import { nextTick } from 'vue'; and using that to get some cadence of states to happen, as is using a setTimeout to get some code to execute after the current tick. The nasty part of setTimeout is also that it can execute code on a component that is already destroyed. It can sometimes help with animations though.
In my experience when people try to use lifecycle hooks they would rather have something happen when one of the props change. For example when a prop id on the child component changes you want to load data from the api to populate some fields. To get this to work use an immediate watcher instead:
watch: {
id: {
handler(newId, oldId) {
this.populateFromApi(newId);
},
immediate: true
}
}
Now it will call the watcher on component creation, and call it afterwards when you pass a different id. It will also help you gracefully handle cases where the component is created with a undefined or null value in one of the props you expect. Instead of throwing an error you just render nothing until the prop is valid.
I've been trying to pass data from child to parent. I'm not quite sure why what I've got right now isn't working. I should mention that the emitter gets fired but the method in the parent component doesn't seem to get called.
Children.vue:
<div #click="removeCommercials()" class="">
<u-button icon color="transparent">
<u-icon icon="switch-on" color="white"/>
</u-button>
</div>
methods: {
removeCommercials () {
this.$emit('test',{message:'HELLOOOO???'})
console.log("AAA")
}
},
Parent.vue:
<Children class="mt-4" #test="noCommercials"/>
methods: {
noCommercials(deactivate) {
console.log("?????")
this.deactivateCommercials = deactivate.message
console.log("REMOVEING COMMERCIALS")
console.log(this.deactivateCommercials)
},
},
From the console I can see the text AAA. From the vue developer tools I can also see the emitter getting fired with the correct data. But the method noCommercials in the parent component doesn't seem to trigger. Nothing from the method gets printed in the console.
From some other posts I've seen people talking about using this.$parent.$emit instead of this.$emit but that didn't do the trick for me. I've also seen others having the same problem but that's because they used the wrong child component.
I'm really confused as to why the noCommercials method does not trigger at all in the parent component. What am I doing wrong?
ADDITIONAL INFO:
I tried to trigger the same method from a different child component with $emit and it works. Now I just need to figure out why this particular child component is giving me issues.
I am a noob in vuejs. This piece of my code is making my app very slow.
<div v-for="(attribute, i) in attributes" :key="i">
<div>{{ AttributeClicked(attribute) }}</div>
</div>
This is the function:
AttributeClicked(attribute) {
this.$store.commit("entities/Attribute/select", attribute.id);
}
This is the mutation:
mutations: {
select(state, id) {
let selection = Attribute.find(id);
Attribute.update({
where: (a) => a.selected,
data: {
selected: false
}
});
if (selection !== null) {
Attribute.update({
where: id,
data: {
selected: true
}
})
}
},
}
The purpose of this code is to make a webpage like this one https://www.tesla.com/models/design#overview
My objective is for example to show the 5 options below Paint attribute when the page loads.
Can anyone tell me how to speed up this app?
You might need to provide more code or info to get to what you want to be doing, but with the code provided I can see several issues. Maybe understanding the problems will help you get to the solution you are looking for.
You've got a function inside the template, these are fine to pass to event handles such as #click, but they can have a negative effect on performance. Whenever you have the template re-render (which happens when certain data changes) it will re-run the functions. In this case you run the function as many times as you have attributes, and if any if the AttributeClicked method causes a reactivity update to propagate to this template, you will have an endless loop.
looks like you're calling a mutation when an action may be more appropriate. Mutations are strictly for updating state in a synchronous manner. The select mutation does not mutate the state, so it's simply wrong to put it in there. Even though it may work, vuex is a tool that not only stores global state, but also organizes it in an opinionated way. If you're going to go against the intended design, you may find it easier to just avoid using it.
I suspect you may be able to execute AttributeClicked(attribute) one time during component mount.
Per the docs you can add the attribute use-input to a QSelect component to introduce filtering and things of that nature: https://quasar.dev/vue-components/select#Native-attributes-with-use-input.
However, if you type something into one of these fields and click outside of it, the text gets removed.
Is there any way to grab that text in Vue before it gets removed and do something with it?
Since v1.9.9 there is also a #input-value event described in the q-select api.
As the api says it's emitted when the value in the text input changes. The new value is passed as parameter.
In the examples there's a filter function, so there you can save it in a data variable:
methods: {
filterFn (val, update, abort) {
update(() => {
this.myDataVariable = val;
})
}
}
updated: function() {
console.log("updated");
this.$emit("render-vue", this.$el.offsetHeight);
},
This works fine enough...but in my app, props get updated (which I don't care about), and then there is a fetch() that updates data, resulting in additional DOM rendering.
So, that means that I get 2 'updated' events in succession! 👎🏾
Essentially, I only want updated to perform the $emit when data has been fully updated and the DOM is finished.
Currently, $emit is happening 2 times in succession, and that's not helping situation - IT DOM gets updated with props and then right after that another updated occurs when data gets updated after fetch().
Now, I could watch - tried that. The issue there is that $emit will fire off before all DOM is updated, sending the wrong info as argument.
It's almost like I need to watch a specific piece of data...and then, and only then, have updated send the $emit. 😖
For additional context, there are no children - this is a child component.
I can probably get this to work by using a setTimeout()...but come, on! That's sloppy! 👎🏾
In the code block that fetches the data, set a property to indicate new data is available
fetch(url)
.then(() => {
// whatever you're doing with the data
this.newData = true;
});
Check this state variable in the updated hook
updated() {
if (this.newData) {
this.$emit("render-vue", this.$el.offsetHeight);
this.newData = false;
}
}