No data being returned from syncfusion querybuilder - syncfusion

Question

I have a dataset that I want to build a query tool for so not being a web developer I turned to Syncfusion's QueryBuilder.
Using the exact code displayed here in their tutorial of local data for the App.vue and datasource.js. I made my webpage, when when entering conditions no data is returned to me. How can I get the data to be return when querying it?

Answer 1

We have checked your reported query. We have prepared Querybuilder sample using local data as demonstrated in the below code snippet.
App.vue
<template>
<div class="control-section">
<div class="col-lg-12 querybuilder-control">
<ejs-querybuilder
width="70%"
:rule="importRules"
:dataSource="dataSource"
>
</ejs-querybuilder>
</div>
</div>
</template>
<script>
import Vue from "vue";
import {
QueryBuilderPlugin,
dataSource,
} from "#syncfusion/ej2-vue-querybuilder";
Vue.use(QueryBuilderPlugin);
import { employeeData } from "/src/dataSource.js";
export default {
data: function () {
return {
dataSource: employeeData,
values: ["Mr.", "Mrs."],
importRules: {
condition: "and",
rules: [
{
label: "Employee ID",
field: "EmployeeID",
type: "number",
operator: "equal",
value: 1,
},
{
label: "Title",
field: "Title",
type: "string",
operator: "equal",
value: "Sales Manager",
},
],
},
};
},
};
</script>
For your reference, we have prepared a sample based on your requirement. Please check the below sample.
Sample: https://codesandbox.io/s/vue-template-forked-g62vv?file=/src/App.vue