JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › Use splitter for Vue-router navigation
Tagged: custom element, smart elements, smart framework, smart splitter routing, splitter route view, splitter vue router, vuejs smart splitter, web component, web components
- This topic has 3 replies, 2 voices, and was last updated 4 years, 7 months ago by
Hristofor.
-
AuthorPosts
-
January 27, 2020 at 3:14 pm #100605
admin
KeymasterHi,
I am using Vue and trying to use your splitter.
The left part is for our page navigation control.
The right part of the splitter is for our view like this:<template> <div> <smart-splitter> <smart-splitter-item size="180"> <router-link to="/">Home</router-link><br /> <router-link to="/about">About</router-link> </smart-splitter-item> <smart-splitter-item> <router-view :key="$route.path" /> </smart-splitter-item> </smart-splitter> </div> </template>
The router view is not updated when you click on the ‘home’ and ‘about’ link.
This example work:<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view :key="$route.path" /> </div> </template>
Any idea’s what might causing this? Should I have a license for using the splitter and get this working?
Thanks in advance.January 28, 2020 at 11:57 am #100615Hristofor
MemberHi olaf@xso,
For some reason it is necessary to include a wrapper around the router-view in order to work. This should fix the problem:<template> <div> <smart-splitter> <smart-splitter-item size="180"> <router-link to="/">Home</router-link><br /> <router-link to="/about">About</router-link> </smart-splitter-item> <smart-splitter-item> <div> <router-view :key="$route.path" /> </div> </smart-splitter-item> </smart-splitter> </div> </template>
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.comJanuary 28, 2020 at 1:21 pm #100619admin
Keymasterhi,
The router-view is now filled sometimes.
When there is a grid on the view. The grid is not shown. Simple components like <h2> or <smart-button> are visible
Here is my vue template for the view using a smart grid:<template> <div> <h1>GRID</h1> <smart-button>Text</smart-button> <smart-splitter> <smart-splitter-item size="50%"> <smart-grid id="grid" @change="rowSelectionChanged"></smart-grid> </smart-splitter-item> <smart-splitter-item> <h1>{{ rowData }}</h1> </smart-splitter-item> </smart-splitter> </div> </template> <script> import "@smarthtmlelements/smart-elements/source/styles/smart.default.css"; import "@smarthtmlelements/smart-elements/source/modules/smart.grid.js"; export default { data: () => ({ rowData: "" }), methods: { rowSelectionChanged(event) { if (event.detail.finished) { const grid = document.querySelector("smart-grid"); this.rowData = grid.getSelection().rows[0].id; } } }, created() { window.Smart( "#grid", class { get properties() { return { grouping: { enabled: true }, sorting: { enabled: true }, filtering: { enabled: true }, selection: { mode: "one", enabled: true }, change: {}, columns: [ { label: "First Name", dataField: "firstName" }, { label: "Last Name", dataField: "lastName" }, { label: "Product", dataField: "productName" }, { label: "Quantity", dataField: "quantity", columnGroup: "order" } ], dataSource: new window.Smart.DataAdapter({ dataSource: [{ "id": 0, "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte", "price": 3.8, "quantity": 6, "total": 22.799999999999997 }, { "id": 1, "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 2, "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea", "price": 1.5, "quantity": 2, "total": 3 }, { "id": 3, "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte", "price": 3.8, "quantity": 2, "total": 7.6 }, { "id": 4, "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna", "price": 3.25, "quantity": 4, "total": 13 }, { "id": 5, "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano", "price": 2.5, "quantity": 4, "total": 10 }, { "id": 6, "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte", "price": 3.8, "quantity": 8, "total": 30.4 }, { "id": 7, "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano", "price": 2.5, "quantity": 6, "total": 15 }, { "id": 8, "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna", "price": 3.25, "quantity": 3, "total": 9.75 }, { "id": 9, "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea", "price": 1.5, "quantity": 9, "total": 13.5 }, { "id": 10, "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle", "price": 1.75, "quantity": 6, "total": 10.5 }, { "id": 11, "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist", "price": 4, "quantity": 11, "total": 44 }], dataFields: [ "id: number", "firstName: string", "lastName: string", "productName: string", "quantity: number", "price: number", "total: number" ] }) }; } } ); } }; </script> <style> smart-grid { width: 100%; height: auto; } </style>
January 28, 2020 at 3:23 pm #100627Hristofor
MemberHi olaf@xso,
The problem is that you are applying the Grid settings on thecreated
hook while it should be duringmounted
.Created
is called before the template is mounted.
Another issue is that you’ve missed to add the reference for the Splitter component:import "@smarthtmlelements/smart-elements/source/styles/smart.default.css"; import "@smarthtmlelements/smart-elements/source/modules/smart.splitter.js"; import "@smarthtmlelements/smart-elements/source/modules/smart.grid.js";
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com -
AuthorPosts
- You must be logged in to reply to this topic.