HTML Elements Forums Docking Layout Use splitter for Vue-router navigation

This topic contains 3 replies, has 2 voices, and was last updated by Avatar Hristofor 2 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #100605
    Avatar
    olaf@xso
    Participant

    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.

    #100615
    Avatar
    Hristofor
    Participant

    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

    #100619
    Avatar
    olaf@xso
    Participant

    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>
    
    #100627
    Avatar
    Hristofor
    Participant

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.