Vue中集成AR，demo示例代码不完整

<template>
    <div id="viewerContainer">
    </div>
</template>
<script>
    export default {
        props: ['reportName'],
        mounted() {
            this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer'
            });
        },
        watch: {
            reportName() {
                this.viewer.openReport(this.reportName);
            }
        },
    }
</script>

<style>
#viewerContainer {
    height: 100vh;
    float:center;
    width: calc(100% - 200pt);
}




如上：示例代码中的内容，请问this.reportName是什么值，如何获取？ 有完整的集成代码吗？谢谢

感谢回复，这是我从网上搜索到的在vue集成AR的例子，请问有和下面这个例子相似的官方文档和demo吗？在下面的例子中，我可以设置报表所在的URL地址、要展示的报表路径、报表参数等，但是上面的官方demo中，并没有可以设置参数的地方！
<template>
<div>
<ar-viewer :serviceUrl="serviceUrl" :reportPath="reportPath" :parameters="parameters" :culture="culture"></ar-viewer>
</div>
</template>
<script>
import { ArViewer } from "@grapecity/activereports-vue";
export default {
name: "MyComponent",
components: {
ArViewer
},
data() {
return {
serviceUrl: "http://myserver/myapp",
reportPath: "reports/myreport.rdlx",
parameters: [
{ name: "param1", value: "Hello" },
{ name: "param2", value: "World" }
],
culture: "en-US"
};
}
};
</script>

问题描述:

集成Demo代码示例:

问题解答，您好关于您的问题，可以参考这里:
https://github.com/activereports/WebSamples17
这是我们全部的示例代码
vue的可以参考这里：https://github.com/activereports ... s/JSViewer_Vue_Core

然后看您的截图，应该就是初始化正常加载报表，里面的reportName就是报表名称。这里的报表名称会传给后端，然后后端会根据名称去返回您配置的报表，所以这个reportName不是固定的，所以就用变量代替的

可以加我QQ546962925

抱歉，您找的这个Demo应该是有问题的，这个项目引入的包是我们另一个产品的包。

也就是ARJS的产品:

所以这个是没办法初始化ActiveReport这个产品的。那个产品是一个纯前端的。所以不存在serviceUrl
所以这个项目肯定是有问题的。而如果您想初始化vue的项目，其实很简单，我们有AR专门用的包:
"@grapecity/ar-designer",
"@grapecity/ar-viewer",

这两个包才是给AR用的，里面有对应的js和css。
然后如何初始化呢，您这边跑一个我们的Demo项目。git上面随便跑一个服务端的项目即可:
然后您的vue项目做如下初始化:

这样就可以初始化一个了
vue代码如下：