Vue UI Components Documentation

Sets or gets the animation type.

Possible values:

"fade"

"slide"

"none"

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :animationType="'slide'">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the duration of the ribbon animation.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :animationDelay="800">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Enables/disables the ribbon.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :disabled="true">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the ribbon's height.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :height="100">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Initializes the content of jqxRibbon. Useful for initializing other widgets.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :initContent="initContent">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    methods: {
      initContent: function () {
        jqwidgets.createInstance('#button', 'jqxButton', { width: 50, height: 50 });
      }
    }
  }
</script>

Sets or gets the ribbon's display mode.

Possible values:

"default" - the ribbon's content is included in its height.

"popup" - the ribbon's content is not included in its height and is positioned absolutely. It overlaps elements underneath it.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :mode="'popup'">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the way to close selected content sections when the mode property is set to "popup".

Possible values:

"click"

"mouseLeave"

"none"

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :mode="'popup'" :popupCloseMode="'mouseLeave'">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets whether the ribbon's header is positioned at the top, bottom, left or right of the content.

Possible values:

"top"

"bottom"

"left"

"right"

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :position="'bottom'">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets whether the ribbon's tabs can be reordered.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :reorder="true">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :rtl="true">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the selected index (tab).

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :selectedIndex="1">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the selection mode.

Possible values:

"click"

"hover"

"none"

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :selectionMode="'hover'">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the position of the scrollbar buttons.

Possible values:

"both"

"near"

"far"

<template>
  <JqxRibbon ref="myRibbon"
    :width="100" :scrollPosition="'near'">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the scroll step.

<template>
  <JqxRibbon ref="myRibbon"
    :width="100" :scrollStep="20">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the scroll delay.

<template>
  <JqxRibbon ref="myRibbon"
    :width="100" :scrollDelay="100">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"type="text/css"/>
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />

• Set the widget's theme property to 'material' when you initialize it.

  $('#jqxRibbon').jqxRibbon({ theme: 'material' });

<template>
  <JqxRibbon ref="myRibbon"
    :width="400" :theme="'material'">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

Sets or gets the ribbon's width.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    }
  }
</script>

This event is triggered when the user selects or unselects an item.

Code examples

Bind to the change event of jqxRibbon.

<template>
  <JqxRibbon ref="myRibbon" @change="onChange($event)"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user reorders the jqxRibbon items with the mouse.

Code examples

Bind to the reorder event of jqxRibbon.

<template>
  <JqxRibbon ref="myRibbon" @reorder="onReorder($event)"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.reorder = true;
    },
    methods: {
      onReorder: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxRibbon.

<template>
  <JqxRibbon ref="myRibbon" @select="onSelect($event)"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    methods: {
      onSelect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxRibbon.

<template>
  <JqxRibbon ref="myRibbon" @unselect="onUnselect($event)"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    methods: {
      onUnselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adds a new item by index.

• index - number;
• data - object with the following properties:
  • title - string;
  • content - string.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.addAt(0,{ title: "New item", content: "New content" });
    }
  }
</script>

Unselects the selected item and collapses its content.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.clearSelection();
    }
  }
</script>

Disables an item by index. Index is a number.

<template>
  <div>
    <JqxRibbon ref="myRibbon"
          :width="400">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <div>
        <div>Content 1<input type='button' id='button' value='Button' /></div>
        <div>Content 2</div>
      </div>
    </JqxRibbon>
    <JqxButton @click="enable">Enable</JqxButton>
    <JqxButton @click="disable">Disable</JqxButton>
  </div>
</template>
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxRibbon,
      JqxButton
    },
    methods: {
      enable: function () {
        this.$refs.myRibbon.enableAt(0);
      },
      disable: function () {
        this.$refs.myRibbon.disableAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Destroys the jqxRibbon widget.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.destroy();
    }
  }
</script>

Enables a disabled item by index. Index is a number.

<template>
  <div>
    <JqxRibbon ref="myRibbon"
          :width="400">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <div>
        <div>Content 1<input type='button' id='button' value='Button' /></div>
        <div>Content 2</div>
      </div>
    </JqxRibbon>
    <JqxButton @click="enable">Enable</JqxButton>
    <JqxButton @click="disable">Disable</JqxButton>
  </div>
</template>
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxRibbon,
      JqxButton
    },
    methods: {
      enable: function () {
        this.$refs.myRibbon.enableAt(0);
      },
      disable: function () {
        this.$refs.myRibbon.disableAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Hides an item by index. Index is a number.

<template>
  <div>
    <JqxRibbon ref="myRibbon"
          :width="400">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <div>
        <div>Content 1<input type='button' id='button' value='Button' /></div>
        <div>Content 2</div>
      </div>
    </JqxRibbon>
    <JqxButton @click="show">Show</JqxButton>
    <JqxButton @click="hide">Hide</JqxButton>
  </div>
</template>
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxRibbon,
      JqxButton
    },
    methods: {
      show: function () {
        this.$refs.myRibbon.showAt(0);
      },
      hide: function () {
        this.$refs.myRibbon.hideAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Removes an item from the ribbon. Index is a number.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.removeAt(0);
    }
  }
</script>

Renders the jqxRibbon widget.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.render();
    }
  }
</script>

Refreshes the jqxRibbon widget.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.refresh();
    }
  }
</script>

Selects the item with indicated index. Index is a number.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.selectAt(1);
    }
  }
</script>

Shows an item by index. Index is a number.

<template>
  <div>
    <JqxRibbon ref="myRibbon"
          :width="400">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
      <div>
        <div>Content 1<input type='button' id='button' value='Button' /></div>
        <div>Content 2</div>
      </div>
    </JqxRibbon>
    <JqxButton @click="show">Show</JqxButton>
    <JqxButton @click="hide">Hide</JqxButton>
  </div>
</template>
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxRibbon,
      JqxButton
    },
    methods: {
      show: function () {
        this.$refs.myRibbon.showAt(0);
      },
      hide: function () {
        this.$refs.myRibbon.hideAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Sets the layout of an item's content if mode is set to "popup".

• index - number;
• layout - string, possible values:
  • "default" - the item's content is aligned with the widget's header;
  • "near" - the item's content is left/top aligned with its title;
  • "far" - the item's content is right/bottom aligned with its title;
  • "center" - the item's content is centered under/next to its title.
• width - number/string;
• height - number/string.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.mode = 'popup';
      this.$refs.myRibbon.setPopupLayout(0,'near',200,200);
    }
  }
</script>

Updates an item.

Note: after an item has been updated with updateAt, initContent will be called again for that item (if set).

• index - number;
• newData - object with the following properties:
  • newTitle - string;
  • newContent - string.

<template>
  <JqxRibbon ref="myRibbon"
    :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
 
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
 
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.updateAt(1,{ newTitle: "Updated title", newContent: "Updated content" });
    }
  }
</script>

Sets or gets the selected index. Index is a number.

<template>
  <JqxRibbon ref="myRibbon"
        :width="400">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
    <div>
      <div>Content 1<input type='button' id='button' value='Button' /></div>
      <div>Content 2</div>
    </div>
  </JqxRibbon>
</template>
<script>
  import JqxRibbon from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxribbon.vue';
  export default {
    components: {
      JqxRibbon
    },
    mounted: function () {
      this.$refs.myRibbon.val(1);
    }
  }
</script>