Due to poor planning, I have created multiple projects as sub folders under one component and it's been an year.
Now we want to divide that component into multiple new components without loosing the history of each project.
I have only option to create new component or to add an existing component in RTC. Is there a way to create a new component from an existing component without losing history?
Related
My problem is the following:
I need to render a bunch of Tableau graphs on a page.
I am currently calling them in tableau-graphs component as follows:
TableauGraphs Component
<template>
...
<tableau-graph
v-if="urls.length > 0"
v-for="(chartUrl, index) in urls"
:src="getVizUrl(chartUrl, ticketList[index])"
/>
...
</template>
When I do this, all the charts are called immediately one after another, and tableau decides the order in which they are loaded. This behaviour is undesired because there might be many graphs and tableau can decide to load a graph much further down on the screen before the first one.
I want to try to do the following:
make tableau-graph component emit a ready event once its loaded.
the parent tableau-graphs listen to that event and load the next chart in urls.
repeat 1-2 until there are no more charts to load.
I have gotten the child component to emit a custom event and listen to it. However, I have not been able to programmatically add a new component in the template. I have tried using h function but I am unsure how to mix it with a regular template syntax.
So, my questions are:
How do I programmatically add an existing Vue component to another in script setup?
Is this a desirable way to go about solving this issue, or is there more elegant way to solve this problem? (For example, using Async Components and/or Suspense)
This question is more on best practise for including some more details in existing component where outlet ref is not available.
For ex. In checkout, during review-order step, I need to add some custom details with delivery-mode and i want to use the complete component as is.
Do i need to
copy all the html & component logic from spartacus code
create my custom component and use all copied code
add the little detail with my delivery mode section
replace the existing component by my custom component using COMPONENT as outlet-ref
There is lot of duplicate code to implement this.
Is there a better way like just inherit all the component detail by importing the component in my module and override the specific section (i am not sure but i was thinking that would be helpful. ).
Here is what I would do:
create new component
copy all the html from spartacus to this component
extend the original component instead of copying all the logic
replace component in configuration
We're working on better way to extend templates, but that's not gonna be available soon. In the approach I recommended when updating spartacus you would only need to validate if the template changed, as the component logic will be automatically updated when you extend it.
based on the following VueSchool tuto https://vueschool.io/courses/vue-router-for-everyone I'm trying to create a Vue app with a menu based on a list of applications found in an October server. I try to replace the static destinations[] by an applications[] filled from the database.
For that I use Axios and Vuex. I'm able to query the data, but I spent many hours trying to get it at the application loading, to create the menu, before the application is displayed...
I have a main.js an App.vue and a MenuApp.vue component for displaying the menu.
My problem is that my getter is always called before my mutation and that my application array is always empty when the menu is creating.
Is there a way to load and init properly all data before displaying my vue.js menu component ???
Or could I reload my menu component after the mutation ?
Thanks for help ;-)
You could use a "loading" layout, before load the main layout.
From "loading" layout, use async to load the applications list and all data you want to get before. At the end, just switch to main layout with applications list loaded.
From OctoberCMS side, I don't know how you are made the requests. But, try to use simple routes, calling router controllers, instead of using components. This will made a more direct request, and a better performance on your final project.
I have two Vue.js parent components.
In one component, it shows available names list which are its child components and in other it shows already selected names list.
What I want to do is that when I click on an available name, it should hide from that component and show it in the other component. And the same if I remove from a selected it should appear in available list.
But these two components are completely unrelated. How can I do this?
Option 1
Create a vuex store:
https://vuex.vuejs.org/guide/
This will allow you to share information between components.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application
Options 2
Use something called an event bus:
https://blog.logrocket.com/using-event-bus-in-vue-js-to-pass-data-between-components/
With this method you can create events in one component and catch them in another component and they don't have to have a parent/child relationship.
Which option to go for depends on your preference and you will have to determine which is best suited for you.
I have two instances of a component on the same parent component and this child component makes an API call in the created lifecycle hook to populate a drop-down list. The list data will be the same for both instances of the child.
So the result is that when my parent component is loaded I'm actually calling the API twice which is unnecessary.
My question is if I want to just call the API once should I either move the API call to the parent and pass the drop-down list items to the child or use vuex and have the parent call an action that calls the API. The action would then save the items to state and the child component will access items via a store getter.
I'm tempted to use the vuex store as the list is small and might be needed elsewhere outside this current parent.
TLDR;
If you want to use it outside of the Parent-> child relationship use Vuex
If you know it will be simple and small, passing it down as a prop works just as well and reduces complexity of setting up the store.
Another option is to store it in localStorage, but this may be less reliable than you want as someone clearing their cache will lose functionality of the dropdown.
You can store it in a Vuex store allowing it to persist for anywhere in the application, however, if the parent is getting the list and it just needs to pass the list of dropdowns to the children, you could also just create a Prop in the children and pass the dropdown list that way.
The Children will have access to the dropdown items and you would not need to add the complexity of Vuex for a simple dropdown in a small app?
You mentioned the list not being very big, and if the dropdown is not something that the User is required to click every time or use, then having it as two API calls is not necessarily bad. You can just load the data when they attempt to access the dropdown at that point, which in some cases may save you and the customer the bandwidth of requesting a dropdown list when not needed.
You should go for Vuex store if you need to render same data to multiple components. Vuex store increases code complexity at initial setup level, but afterwords it is so simple and effortless to use API data in to the multiple components. It doesn't mean that use Vuex store in each application. If you are developing application that is progressive in nature and it will get more complex in future then start using Vuex store. It will help you in future developemnt. Here is all Vuex store details.