Vue "hook"挂载事件后呈现的外部对象

Question

我需要"挂钩"在vue安装事件之后创建的对象。

在一个页面中，我有该应用程序，在此内，我有一个DIV，我在其中渲染ASP.NET Core JS2 SyncFusion Server Server端网格。

在调试中，我看到在安装Vue组件后呈现网格。

我如何阅读"参考"我放了一些网格的列？

，尤其是"钩子"的最佳策略是什么。在我的vue应用程序内呈现后的一个外部对象？

html

    <div>Omitted for brevity</div>
    
        <div id="app">
        <div>
        
                        <ejs-grid id="grid" enablePersistence="false" dataSource="Model" allowPaging="true" allowFiltering="true" allowGrouping="true"
                                  allowSorting="true" allowExcelExport="true" showColumnChooser="true" allowReordering="true"
                                  contextMenuItems="ContextMenuitems" contextMenuClick="contextMenuClick" 
                                  toolbar="@(new List<string>() { "Search", "ColumnChooser" })">

                        <e-grid-columns>
                            <e-grid-column template="#template" headerText="@Html.DisplayNameFor(model => model.Title)"  ></e-grid-column>
                            <e-grid-column field="Seller.FullName" headerText="@Html.DisplayNameFor(model => model.SellerId)" visible="false"></e-grid-column>
                            <div>Omitted for brevity</div>
                        </ejs-grid>
        </div>

    <script id="template" type="text/x-template">
   
        <div ref="title">${Title}</div>
    </script>

vue

new Vue({
    el: '#app',
    data: {
        range: {
            from: null,
            to: null
        },
        filter: {
            show: null
        },
        filters: []
    },
    mounted() {
        // Tried here with no luck
        this.$refs.title
    },

update

我注意到Razor中的所有HTML代码(服务器端(都无法使用VUE，例如

    @if (true)
    {
        <div ref="title"></div>
    }

Vue不会查看此裁判

我们建议您使用以下代码，使您可以在网格中修改现有列或在网格中添加新列。

 <ejs-grid id="Grid">
    ...
 </ejs-grid>

要更改网格中的列的宽度，请按照以下代码：

。

 //Allows you to get the Grid element. Here “Grid” is the ID of Grid element.
 var grid = document.getElementById("Grid")
 //Creates a instance for the Grid
 var gridinstance = grid.ej2_instances[0]
 //Changes the width of the column in 2nd index
 gridinstance.columns[2].width = 400;
 //To refresh the columns in Grid to view the changes call the below function
 gridinstance.refreshColumns();

要在网格中添加新列，请按照以下代码：

//Allows you to get the Grid element. Here “Grid” is the ID of Grid element.
var grid = document.getElementById("Grid")
//Creates a instance for the Grid
var gridinstance = grid.ej2_instances[0]
//Adds a new column in in the Grid
gridinstance.columns.push({ field: "ShipCity" })
//To make the added new column display in Grid call the below function
gridinstance.refreshColumns();

如果我们误解了您的查询。请提供有关您要求的更多详细信息。请分享视频演示以解释您的要求。