Javascript Vue“；钩；装载事件后渲染的外部对象

我需要“钩住”在Vue挂载事件之后创建的对象

在一个页面中，我有一个应用程序，在这个页面中，我有一个div，其中我呈现了一个ASP.NET Core JS2 Syncfusion服务器端网格

在调试过程中，我看到网格是在安装vue组件之后呈现的

如何读取我在网格的某些列中输入的“ref”

但特别是，在我的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>

更新

例如，我注意到razor（服务器端）中的所有html代码都不适用于Vue

    @if (true)
    {

        <div ref="title"></div>
    }

@if（真）
{
}

---

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();

---

如果我们误解了你的提问。请提供有关您的要求的更多详细信息。请共享一个视频演示来解释您的要求。

我不确定，但请尝试使用hook或类似于

e-grid-column

的Vue组件。为什么不在这个组件内部对ref做些什么呢？@a1626我更新了这个问题，不幸的是，nextTick没有更新work@JacobGoh你能详细解释一下吗？syncfusion网格不是Vuecomponent@Max当您说

updated

不工作时，您的意思是它没有被调用，还是

ref

不存在？您在哪里尝试了下一步的

mounted

？

//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();