Skip to main content

value

Description​

Bindable string that holds the current filter query in field-ID form

Use it to read the current query, pre-populate the input on mount, or persist and restore filter state across sessions.

Usage​

value?: string;

Default: ""

Example​

<script setup>
  import { ref } from "vue";
  import { FilterQuery } from "@svar-ui/vue-filter";

  const fields = [
    { id: "status", label: "Status", type: "text" },
    { id: "created", label: "Created", type: "date" },
  ];

  const query = ref("status: Open");
</script>

<template>
  <FilterQuery :fields="fields" v-model:value="query" />

  <p>Current query (field-ID form): {{ query }}</p>
</template>

Details​

The component maintains two parallel representations internally: the displayed text uses sanitized field labels (what the user sees), while value always contains the stable field-ID form (e.g., first_name: Alex instead of FirstName: Alex). Assigning a value externally converts it to labels for display; user input converts labels back to IDs before updating the prop.

Related articles: