I am working on a project where a new feature is to be added. The feature uses a Vue instance that was created to live on one page. It grabs: window.location.href and creates meta data with some other info that can be shared to other users.
This now needs to have same share feature to live on a page that is dynamically created. I have several rows of information, each row (can be one row, can be 100 rows) has one dropdown that is populated with the info from the box that is clicked on. Within the dropdown, I need to have this share feature. I am able to get the first row to populate with the Vue instance with a shareWidget.$mount('some selector[with a data attribute="active"')
function. This works great no matter which row I click first.
The problem is that, as soon as I click on another row ($('some selector') is removed and a new $('some selector[with a data attribute="active"')) is added within the dropdown that is now part of the active row.
I cannot get the new selector to be populated with the Vue instance called sharingWidget. I have tried to destroy and mount again, but I get [Vue warn]: $mount() should be called only once. which is expected. Is there a way to make the Vue instance move to a new location or unmount then mount it again?
I do not believe that this can actually be done. Once a Vue instance is mounted, it cannot be mounted again. The Vue instance, as opposed to a component can only live in one place. My work around was that instead of each row having a drop down, only one ever exists. When I tile is clicked on, it gets the active row and appends the drop down to the bottom of it. So, as I said, unmounting and remounting do not seem to be a thing.
Related
Created web component using LitElement. I am using this component multiple times in the same page.
I want to trigger one event only when my component is rendering first time on page.
What do you mean by "first time on page"?
If you want the first time any instance renders in the current loaded page set window.someProperty before firing your event and then check it before firing the event again. Anything on window is cleared when the user navigates between pages, but if you're running an SPA (which Lit is particularly well suited to) that might not happen for a while.
If you want to do something the first time the element is loaded you can add the flag to the module that holds the element.
If you want each element to fire an event as it initially renders you can use firstUpdated.
If you want the first element somewhere in the document to fire an event then that's harder, as web components are all about isolated functionality - they aren't aware of other instances on the same page. Your best bet is to either:
Add a parent component that picks up events from all the sub-components and only does something the first time it gets one.
Add an index property that you increment for each instance and only have the event fire when it is 0.
I am getting data from a database using Ajax and I display them in an HTML table using VueJS. I let the user perform some actions on the data (Add a new row, edit, delete). It works just fine.
My problem is that I'd like to put a DataTable to allow the user to perform researches and to sort the rows in the table. I'm simply doing : $('my-table').DataTable(); on the HTML table already displayed by Vue. It works until I want to make a change in my data. They're changed in the Vue instance but not rendered in the DataTable.
For now I tried to use the destroy() method on my DataTable then to remake and instance and I have a strange result, here's my code when I want to update my DataTable:
$('my-table').DataTable().destroy();
// Here I'm getting the data and put it in the Vue instance
// Once it's done I simply re-mount the DataTable :
$('my-table').DataTable();
And it doesn't update, it double a line already existing or display the line I inserted until I change the current page.
What's even more weird is that if I do :
$('my-table').DataTable().destroy();
// Here I'm getting the data and put it in the Vue instance
So now it's a simple HTML table on my page, correctly updated with Vue, I type in the console :
$('my-table').DataTable()
And it works just fine. I don't understand because it's exactly the same as above except that i'm typing it from the console right ?
I hope that it's clear enough. Thanks already!
Vue might be competing for DOM elements here with DataTable.
If you use $('my-table').DataTable() it references the table by the DOM position.
When working with Vue, it's better to use $ref to reference an element.
Vue does some magic in the background that allows only object that changed to re-render. So it seems like when you're destroying and creating a new object, Vue doesn't have a way to know that it changed, and doesn't re-render it.
there's a few ways you might for you.
use a key for the DataTable element. When there's a change update the key, which will redraw the element
you can try this.$forceUpdate(); at the end of the function
you can also try this.$nextTick().then(()=>$('my-table').DataTable())
I have a React component that renders a list of items. I have a different component which allows user to add a new item. This new item is created by making an async call to the server. Can the component that renders the list listen to changes in the server and update itself.
The new item is added through a modal hence when the modal is closed, an action needs to be triggered to update the component that renders the list of items. Right now I am having to refresh the browser to reflect the changes in the UI.
If I close my modal, there is no way I am triggering a change to the component that renders the list of items. I thought about adding the result of the async call which is a list item to the state using redux as a way to cause a re-render. However, the client I am interfacing with does not give back all the properties that the items requires (as a part of the Typescript interface). Hence this method won't work. An alternate way to force a re-render to the component that displays the list. But again, can't really think of a way that would be work and how would I trigger the componentDidUpdate hook.
if (the server supports webSockets) {
use webSockets;
} else {
use socket.io;
}
I'm new to Angular, and cannot really find any good and clean answer to this question.
In a component I have a few buttons and a list ('li').
When a button is clicked it should create and add an instance of another component to the list. The different buttons should add different components.
I've successfully managed to add new instances via the componentFactoryResolver, but are having a hard time animating them the they are created or removed.
What would be a "correct" way (as the Angular team intended it) to dynamically add and remove components and animating it?
What you're looking for is navigation using Router.
I created a plunker here: https://embed.plnkr.co/sukXA2zRV7kEAq4MZDXY/
When you click A, an instance of Component A is created and added to the DOM and when you click B, the instance of A is gone and an instance of Component B is created.
HostComponent is the component where it has child routes defined. Notice how in the component, you don't actually reference any of these "child" components at all. The parent child route relationship is defined inside the app-routing.module.ts.
I recommend taking the time to read the Router guide from start to finish as this is one of the key aspects of developing in Angular 2:
https://angular.io/docs/ts/latest/guide/router.html
Good luck!
EDIT Added route animation for ComponentA and updated plunker link.
I'm trying to build a ReactJS component that i will release as open source that manages tabs and allows to load other components into the tabs by either create a new instance of the tab component each time you click it or reusing the same component instance until the TabView is destroyed.
I managed to create the first part of the component, and it works, but unfortunately the tabs seems always to attempt to create a new Loader component (which is responsible for either reuse an instance or create a new one.).
In the demo the companies and home count (wich can be increased by clicking) should remain the same even after changing tab and coming back. I can't save the count to the parent component because the tab will contain other complex controls and I can't keep passing the state to the parent.
How can I solve my problem? At the moment i'm saving the instance into a state property and reuse it, but it seems to not work. :/
Thanks for any futher help!
Source code: http://pastebin.com/zaqXwi4V
Online demo: http://matt93.altervista.org/demo