Report Viewer Component - Setting Parameter Values

<template>
  <div>
    <div class="container-fluid">
      <div class="form-group mb-3 mt-3">
        <div>
          <label>Select Product Categories</label>
        </div>
        <div
          class="form-check form-check-inline"
          v-for="category in categories"
          :key="category.categoryId"
        >
          <input
            class="form-check-input"
            type="checkbox"
            v-model="category.checked"
            :id="'category' + category.categoryId"
          />
          <label
            class="form-check-label"
            :for="'category' + category.categoryId"
            >{{ category.categoryName }}</label
          >
        </div>
        <div class="mt-1">
          <button
            type="button"
            class="btn btn-outline-primary"
            @click="onPreview"
            :disabled="previewDisabled"
          >
            Preview Report
          </button>
        </div>
      </div>
    </div>

    <div id="viewer-host">
      <JSViewer theme="ActiveReports" ref="reportViewer"></JSViewer>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";
import { Viewer } from "@mescius/activereportsjs-vue";
import "@mescius/activereportsjs/pdfexport";
import "@mescius/activereportsjs/htmlexport";
import "@mescius/activereportsjs/tabulardataexport";
import "@mescius/activereportsjs-i18n";
import Core from "@mescius/activereportsjs/core";

Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json");

export default {
  components: {
    JSViewer: Viewer,
  },
  setup() {
    const reportViewer = ref(null);
    const previewDisabled = ref(false);
    const categories = ref([
      {
        categoryId: 1,
        categoryName: "Beverages",
        checked: true,
      },
      {
        categoryId: 2,
        categoryName: "Condiments",
        checked: false,
      },
      {
        categoryId: 3,
        categoryName: "Confections",
        checked: false,
      },
      {
        categoryId: 4,
        categoryName: "Dairy Products",
        checked: false,
      },
      {
        categoryId: 5,
        categoryName: "Grains/Cereals",
        checked: false,
      },
      {
        categoryId: 6,
        categoryName: "Meat/Poultry",
        checked: false,
      },
      {
        categoryId: 7,
        categoryName: "Produce",
        checked: false,
      },
      {
        categoryId: 8,
        categoryName: "Seafood",
        checked: false,
      },
    ]);

    const onPreview = () => {
      reportViewer.value.Viewer().open("reports/multi-value-param.rdlx-json", {
        ReportParams: [
          {
            Name: "CategoryId",
            Value: categoryIds.value,
          },
        ],
      });
    };

    const categoryIds = computed(() =>
      categories.value.filter((cat) => cat.checked).map((cat) => cat.categoryId)
    );

    onMounted(() => {
      onPreview();
      reportViewer.value.Viewer().documentLoaded.register(() => {
        previewDisabled.value = false;
      });
      reportViewer.value.Viewer().reportLoaded.register(() => {
        previewDisabled.value = true;
      });
    });

    return {
      reportViewer,
      previewDisabled,
      categories,
      onPreview,
      categoryIds,
    };
  },
};
</script>

<style>
#viewer-host {
  width: 100%;
  height: 500px;
}
</style>