I have a component I created that extends Ext.window.Window, I've given it an alias of 'widget.customereditor'. Once I've created an shown an instance of this component both of the following pieces of code seem to be getting a reference to the same thing:
Ext.ComponentQuery.query('customereditor')[0];
Ext.widget('customereditor');
The problem is when I try to execute the close method on the returned object. So the following does work and closes the window:
Ext.ComponentQuery.query('customereditor')[0].close();
While this does not work:
Ext.widget('customereditor').close();
I'm wondering what the difference is between the two ways of querying?
After reading the API docs I found the answer. It turns out that Ext.widget does not actually query for an existing instance of a component in the DOM but instead creates new instances of components by their xtype. Ext.ComponentQuery should be used to find existing instances of components.
Related
After trying to find solution to this issue for hours on various forums i am posting this here.
So i have two components. 1) App and 2) Todo. Both renderes a list and i can complete items so there will be two lists one for incomplete items and one for complete items. you can click on item and it will be gone to complete items list.
So in my example you can see i am using same component but with two diffreent ways to give data to component. one using API and one using native js Data. in both cases it renderes but with api i can click on list item and it will be gone to completed list but with javascript array example it doesn't work. i am completely amazed with this because component is same. how it can affect like that.
many answer here do tell me that computed properties are not reactive as they are cached but what’s the solution to that ? i can put data variable but then the first case of api will not work because time it takes to fetch it. so please help me with this one.
complete code at sfc playground
You have reactivity issues the computed property probably expects that value to be constant because you provide a non-reactive array from the parent.
I think you have 2 options here:
you either provide a reactive prop from parent
or you set a local data attribute in the child-component so that vue will know that it can change
Your fiddle didn't work for me so I copied your code to codesandbox, I have both examples there but commented out the first solution, there you basically simply add the array to the data object and reference that in the code.
Second solution you can add a mounted hook to define reactiveAssignments to your data in the child component this way it will have the same reference so that's why it would work that way.
I think the first solution is simpler, but it is really up to which one you prefer.
You can check the solutions here in my codesanbox
A better approach could be though by setting up component events instead of v-models in the child you should use it in the parent because this way you are directly modifying the props. You can read more about this here: https://vuejs.org/guide/components/events.html#usage-with-v-model
I am trying to create sub components under a main component and sending props from main to sub components. I would like to have possibility if user makes changes on sub component it will not affect main component. I mean one way binding.
to see full repository https://github.com/saidakyuz/test-vue-props-wih-cypress
As a solution SubComp3 returns individual element of reference types, but I would like to have possibility to return full array or object in case I need to use it.
Can someone help me to find out a solution?
I found a good way copying reference objects without it's reference connection. So that main component won't be affected from changes on child component.
Changes I made(shallow);
from:
var cObjectString=this.pObjectString
to:
var cObjectString={...this.pObjectString}
But shallow doesn't work for array object. For that I have used deepclone as following;
from:
var cObjectArray =this.pObjectArray
to:
var cObjectArray = cloneDeep(this.pObjectArray)
In this article you can get more information about shallow or deep clone reference types
I have this weird bug with a slot that is unreliable in certain unknown cases.
Components
There are 3 hierarchical components.
The grandchild (headlessTable), which offers a slot named arrayValue.
The child (collapsableCard), which passes the slot between grandchild and parent.
The parent (orderDataCard), who decides to render a link for that slot.
Problem: Instead of rendering the link of the parent, the default slot html of the child is being rendered when new data is loaded.
Datastructure (orderDetails)
process (obj)
mark (string)
common (obj)
additionalArguments (array)
category (string)
type (string)
name (string)
value (string)
salesOrganisation (obj)
invoices (array)
invoiceAgreementId (string)
paymentType (string)
Reproduction
Stackblitz or Codesandbox
Please look at the field additionalArguments, it contains a link.
Press ALT+M to simulate fetching new data. Now, instead of rendering a link, the default slot html for that named slot is rendered instead.
You can press ALT+J to load the original data, but this time there's no link.
Initial data (ALT+J)
Loaded data (ALT+M)
Type
Equal value
mark
str
false
common
common
obj
true
salesOrganisation
salesOrganisation
obj
true
invoices (empty)
invoices
arr
false
How 2 resolve
if you uncomment line 68 in app.js (or line 73 in App.vue if you're on codesandbox), which is the field called mark
if invoices is not initially empty in app.js
if mark is removed from html in orderDataCard
if salesOrganisation is removed from html in orderDataCard
if the html in the v-for template section for invoiceItems is empty in orderDataCard
Obviously, these are not solutions.
Notes
In any case, there is no dependence or anything between any of the fields, so it's hard for me to understand why this happens and I suspect this to be a bug with vue. I already created an issue for this. However, devs won't look at the reproduction, because they think it's not minimal as #lines > 100. As soon as I delete any more meaningful lines, the bug is resolved and the removed code is not faulty, so it's very frustrating to work on this. I could still remove lines that are not meaningful, but that would make it more difficult for everyone involved to understand what data is being rendered.
Is anyone able to acknowledge the fact that this is a problem with vue and that the code is not reducible OR (I would prefer this) is anyone able to fix this?
The problem is linked to Vue handling of multiple instances of the same component. In OrderDataCard.vue you have two instances of Collapsable-Card without unique keys. In this case:
Vue uses an algorithm that minimizes element movement and tries to
patch/reuse elements of the same type in-place as much as possible.
I don't quite know how these algorithms work, and why, apparently, it reused the second instance (without a defined slot content), but, setting a unique key for these components solved the issue.
See the working code sandbox: https://codesandbox.io/s/admiring-hamilton-5ytpp?file=/src/components/OrderDataCard.vue:133-149.
Note: I couldn't trigger keyboard events in my browser, so I triggered them on button click.
This may not be the solution, but could help find it:
Objects
I noticed you are working with objects and turning them into arrays. Objects properties can be problematic to work with, because unlike arrays updated properties are not propagated. This is a problem with JavaScript, not Vue. Vue was only possible because of observers introduced, but objects are still not part of that.
You might run into problems when an object is partially updated.
I would suggest looking at Vue.set.
Old code of mine invokes it explicitly by window.Vue.set() for changes in object properties so Vue can propagate them correctly.
That is kind of a bug in Vue, but again stems from JavaScript itself.
Computed arrays
I'm not entirely sure but the computed arrays don't save the above issue with working with objects.
I would go the safe route and use Vue.set() when updating objects and object properties. You can still use the computed arrays then.
Otherwise the obvious: Make real arrays out of the objects instead of working with objects half the time.
this.process
Is there a good reason you are using this.process explicitly instead of the component's props? Or is that a component from a library?
Slots
Have you tried the exact same code but without using the collapsable-card? Just output the link itself? It might point to slot problems in the collapsable-card component. Maybe also partially because of the objects thing from above.
I'm trying to create a reusable components with BEM methodology in mind by using global mixins.
Here is a live example of what I'm trying to do in this example https://codesandbox.io/s/ojyym18355
As you can see, I would like to be able to pass multiple props as an array with class, so it will render test test--one, so far only the last class test--one is output.
Any idea how I can solve this problem? thank you!
In your code example, when you add multiple bindings this way v-bind="[test, test_one]", it transforms into following bindings on the element:
class="test"
class="test--one"
Which, means that the last value overwrites class binding and you are left with a single value of test--one.
As a solution, classes can be passed the same way as multiple bindings - as an array or object. Here is an example:
Note, that this is an example of more flexible usage of bindings. In order to make reusing components efficiently, initial data format of mixin's data property may require adjustments.
With cycle.js I am trying to create a reusable component that can exist multiple times of the page, including event handlers.
When using DOMSource.select it seems to be matching on the entire app container. Is there a way I can .select from only my (this instance of the component's) sub elements?
If you have a single component or just a few, isolate() mentioned by tm1rbrt works well and is simple to use.
If you have a large list of objects to render as components, especially if you have to update that list, try out cycle.js collections: https://github.com/cyclejs/collection
The answer was to use isolate(). It's somewhat similar to every Iterable item in react needing a key attribute.