values

Description

Optional. Allows a user to bind values for controls inside the toolbar

Usage

values?: Record<string, any>;

Examples

Getting current value of controls inside of toolbar:

<script setup>
  import { ref, watch } from "vue";

  const values = ref({});

  // will be triggered on changes
  watch(values, (v) => console.log(JSON.stringify(v)));
</script>

<template>
  <Toolbar
    :items="[
      { comp: Text, key: 'query' },
      { comp: Switch, key: 'state' },
    ]"
    v-model:values="values"
  />
</template>

Setting initial values for controls inside of toolbar:

<script setup>
  const values = { query: "something else", state: true };
</script>

<template>
  <Toolbar
    :items="[
      { comp: Text, key: 'query' },
      { comp: Switch, key: 'state' },
    ]"
    :values="values"
  />
</template>

Changing values for controls inside of toolbar:

<script setup>
  import { ref } from "vue";

  const items = [
    { type: "label", text: "Active Mode" },
    { comp: Switch, key: "state" },
  ];

  const values = ref({ query: "something else", state: true });

  // change value later on
  const reset = () => {
    values.value = { ...values.value, state: false };
  };
</script>

<template>
  <Toolbar :items="items" :values="values" />
</template>