I'm planning to have the following layout:
+-------------------------------------------------+
| HEADER (STATIC) |
+-------------------------------------------------+
| FOREWORD (just homepage; dynamic) |
+-------------------------------------------------+
| BOOTSTRAP CARDS |
| with navigation links |
| (dynamic) |
+-------------------------------------------------+
Since it's a Single Page App, I'm using Vue.js with routing to make sure everything gets displayed in the same view. However, trying various modifications to make the dynamic contents disappear and be replaced with a different page selected from the Bootstrap cards doesn't give results I'd like to achieve (links from cards and cards themselves don't disappear and the contents of destination links gets displayed in a spot where <router-view></router-view> is placed. I'd like the FOREWORD and BOOTSTRAP CARDS to be totally replaced by destination links).
Is there any dedicated way to achieve this? Or should I just manipulate with v-if and a show/hide flag defined in JS underneath to hide the dynamic contents when links from cards get selected?
Setup "named views" - look in the official docs, or make the router-view component contain the foreword and the cards.
Glad you got it figured out.
Related
On _collection.vue I have something like
<div>
This is a collection
<NuxtChild />
</div>
And inside of category > index.vue I have content like
<div>
This is a Bicycle Page
</div>
If I go to http://localhost:3000/collection/bicycle
It will only show This is a Bicycle page but it will not show the parent layout.
What am I doing wrong?
Isn't _collection.vue the parent of anything inside of the _category folder? Shouldn't everything _collection.vue show in addition to the child components?
Here _category and _collection are at the same level, so it's basically one of them.
You cannot have 2 variables at the same time, it's like asking: "what is my variable: X or Y?".
You can have only 1 dynamic page, especially at the same level. If you want to have /collection/bicycle, then collection directory and _type.vue (for bicycle) inside of it should be enough.
I think you have mixed up the concepts of pages, components and layouts here.
If you are trying to set up a layout that is applied to each page in pages/collection, you could make use of an actual layout.
If you are trying to display a particular piece of content on multiple pages, you should use components.
Further information around nested route handling.
Just change a _collection.vue to index.vue If you want to have collection path as dynamic value, change folder name to _collection. And as kissu wrote you in a comment, you have two routes at the same level, so it reads just one. All you need to do is change _collection.vue file name if you don't need a flexible route.
I am developing a Vue3 application with a component that renders a D3 chart.
The problem occurs when I navigate to another page and get back to the same D3 component but with different data. The D3 charts keep on getting stacked on each other.
I am using Vue3 and found it is a bit difficult to disable caching of components but perhaps I missed some options. I wouldn't mind disabling caching completely, because most of the data is obtained from localStorage, so pretty quick anyway
Here is a sandbox to illustrate the problem:
https://codesandbox.io/s/vue-3-vuex-4-vue-router-forked-eem3ui?file=/src/components/Miserables.vue
If you click on the "Miserables" link, then to another link (Playerlist or About) and back to Miserables, you'll see the charts stacked.
You have at least 2 "smells" in your code:
you are creating and injecting <script> tags every time your Miserables component is being mounted - after multiple mountings you will have a lot of duplicate JavaScript code, pontentially poluting the global namespace (multiple times) and worse - potentially attaching multiple event handlers or setting up timers;
on every mounting you are creating a new SVG and appending it to the BODY - so it's not Vue's fault that you're getting multiple SVGs on the page;
I have to build 3 different pages and each page has a different toolbar.
I know that in app.vue the head section is rendered and the components should be the body so it would make sense to only have the toolbar in the app.vue section but the problem starts when I have 3 different toolbars when I call the 3 components.
Whats the correct way to do this? Should I have the toolbars in the components themselves even though its going to be rendered in the main section, or should I somehow, dynamically load the different toolbars on app.vue as I load the components?
this is a "representation" of I want to achieve.
Page1.vue -> toolbar 1
Page2.vue -> toolbar 2
Page3.vue -> toolbar 3
I had something similar task and what i did:
Make component-wrapper <MyToolBar /> and in it use:
<component :is='computedComponent'></component>
In this component u should just import yours toolbars.
If u use a vue-router, u can use hooks to listen page route.
Or u can use props.
well, i don't know is it the right solution, but it worked in my case
You could potentially make use of slots if there isn't any major differences between the toolbars. Read more about them here. Hope this helps :)
In Vue Material Table component there is an explanation for single selection, which in codepen doesn't work https://vuematerial.io/components/table (SCROLL TO SINGLE SELECTION). I want working example of this making sure that the list to be rendered is from API.
The example on Vue Material - Table / Selection / Single requires vue-material#1.0.0-beta-8 to run.
The pen that opens is using https://unpkg.com/vue-material#beta as dependency (See at Pen Settings -> JavaScript tab).
Currently https://unpkg.com/vue-material#beta resolves to https://unpkg.com/vue-material#1.0.0-beta-7/dist/vue-material.min.js. Shouldn't take long until it starts to point to beta-8.
Solution:
Nevertheless, until it updates the version, you should add the dependency https://unpkg.com/vue-material#1.0.0-beta-8/dist/vue-material.min.js yourself:
Button Settings
JavaScript tab
Third URL down below: where it is https://unpkg.com/vue-material#beta make it https://unpkg.com/vue-material#1.0.0-beta-8/dist/vue-material.min.js
Profit.
Check an updated pen (where I changed it): https://codepen.io/acdcjunior/pen/yKBvgL
I use Tapestry 4.1.1 and i need to change the order in wich some components are rendered in a tapestry application page.
I have the following in HTML:
-start of page
-component1 (a map showing a location)
-component2 (a resulttable contrib:table)
-end of page
the resulttable gets 90 objects to show. It is paged. 10 objects per page. 9 pages.
Becouse tapestry handles the sorting order of the objects i don't know wich objects will be displayed. I think i need to wait for it to render to know exactly what is being shown to the user?
component1 shows a location on the map. It needs an identifier from one of the objects displayed in the resulttable. Not any identifier. one of the 10 being displayed out of all 90.
I use the 'row' binding setRow(Object 0) to know wich objects are displayed. The method gets called 10 times. This is perfect.
I then need to pass the identifier to component1. Becouse in the HTML component1 comes before component2 it will be rendered before rendering the resulttable.
I tried placing component2 before component1 in the .page specification but that makes no difference. Only by putting component2 before component1 in the HTML did the trick.
i really hope someone can help me out here becouse i have been stuck for a while now and i really need to get this to work.
Thanks in advance for any help!!
Could this be done using JavaScript on the client side? What you want to do is much easier in Tapestry 5. In Tapestry 4 you can do some wierd tricks, like rendering the table first, capturing its output HTML, than inserting it later on the page.
Alternately, you could provide the correct model objects to the contrib:Table (rather than let it handle all the pagination work) and that way you'll know, before it renders, exactly what it will be rendering.