Use splitter for Vue-router navigation

[admin]

Hi,
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.

[Hristofor]

Hi 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.com

[admin]

hi,
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>

[Hristofor]

Hi olaf@xso,
The problem is that you are applying the Grid settings on the created hook while it should be during mounted. 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

[Author]

Posts