I'm using Nuxt2 and '#nuxtjs/composition-api'.
This '#nuxtjs/composition-api' has readonly() function, however this not behave like Vue3 readonly
When you use '#nuxtjs/composition-api' readonly, you can actually change that value.
I'd like to use Vue3 readonly function or some function which has same behavior.
On the other hand, as for shallowReadonly(), both versions behave like the same.
Therefore you can use shallowReadonly(), if the target is not nested object.
But I'd like to use it for nested object in this time.
If someone knows this solution, please answer!
Related
I have a subcomponent using forwardRef to get a ref from the parent component, however, I'm curious as to what happens if I didn't pass in a ref from the parent component. I tested other parent components that are also using this subcomponent, but aren't passing in a ref and they seem to work perfectly fine. Help is appreciated!
The reason why forwardRef is implemented is to have access to some functions or state properties of that subcomponent. If you do not pass that ref to it, you simply cannot access those from your parent component; most likely where the ref is not passed, there are not used any functions/state properties of the subcomponent, that's why it works fine. (If you take a look at the time when classes were used instead of functional components, you'd see that the ref was a property present to each class by default. However, it is not recommended to use forwardRef (only if it's an overhead to do otherwise), as they also say in the documentation, since it is an anti pattern)
How can I use a Vue computed property in more than once place but only make the computed property function run only once and not once for every single time that I use it?
I am using the computed function output in 4 places, this makes the function call to the computed property run 4 times!
Computed properties are actually cached in Vue as the documentation says:
computed properties are cached based on their reactive dependencies. A
computed property will only re-evaluate when some of its reactive
dependencies have changed.
Maybe we can figure out what is the problem if you provide a code sample
Seems like a simple requirement, and of course I could maintain my own flag using the lifecycle hooks. See also https://forum.vuejs.org/t/check-if-mounted-was-called/88177/6 for a similar question.
However, I prefer to use something already build-in. I am sure, VueJs maintains the lifecycle state somewhere.
Here's my watcher, simplified:
#Watch('openId')
private onOpenIdChanged() {
this.submitSomething(); //But ONLY if it's mounted!
}
How can I access the lifecycle state of the same component in a component's watcher, without using my own flag?
There is no public API for this, so the only correct answer is to maintain your own flag.
There is a private property on the component instance _isMounted which Vue uses internally (as of version 2.6.11).
I'm using react-native-google-places-autocomplete for google places auto-complete.
I'm creating a new page to edit the address and I want to use the setAddressText function to insert the last current address before the editing.
I tried to create a ref and store it with redux of the google autocomplete component but since this search bar rendered only when clicking on the edit button the reference hasn't created and I cant use the setAddressText on the ref.
Does anyone have a solution for that?
You use either useRef or createRef to create the ref object. Before calling any methods on it, you must make sure that myRef.current has been set. The easiest way (if your environment is up-to-date enough to support it) is with the optional chaining operator ?.
myRef.current?.setAddressText(someText);
However I would advise against storing a ref in redux. As a best practice, it is advised that everything in your redux state should be serializable — a ref is not.
I need pass the main component to a deeper child. Currently I am doing on child this.$parent.$parent, but is not reliable for me, because this same child could be in a third+ deepth level.
My idea is transfer the main component reference between childs, like:
<v-some-child :main-component="_self"></v-some-child>
So I can use the main component instance where I think need by passing the _self or this.mainComponent data to a more inner child.
My doubt is:
_self attribute is reliable to points to component Vue instance? Seems that _ prefix is to internal attributes, and $ for public (reliable). If it is true, what I can do use?
There are some better way to do what I wants?
Thanks!
Edit 1: as an immediate more reliable workaround, I am using data() { self: this }, then I am using :main-component="self".
I'm unclear where _self is getting set in your case. Typically _self = this; is an approach used by developers to pass the the current Vue instance via closure to a callback function. I wouldn't trust a _self unless I knew exactly where it was getting set.
Your edit1 should absolutely work. As long as data(){ self: this } is happening on the main Vue instance and in the components you use self when setting a property via a : like :main-component="self" then that should work fine given that the main Vue component data properties are merged into all components used by that vue instance.
It's kinda a cleaver approach frankly. As #raina77ow mentioned it may make sense to look at VueX or an EventBus but the approach you propose in Edit1 should be a reliable way to pass around the main Vue instance.
As an aside, I wonder if root or main might be a better name then self. Given that it's the "self" of the main or root level Vue instance not the the "self" of the child passing the value.