在Vue.js中获取对方法中元素的引用

vue.js Vue.js

樱飞云泡芙

2020-03-19

如何获得在Vue.js中触发该方法的元素的引用？我有这样的HTML：

 <input type="text" v-model="dataField" v-bind:class="dataFieldClass" />

在我的Vue.js视图模型中，我有一个方法：

dataFieldClass: function () {
    // Here I need the element and get its ID
    // Pseudo code
    var elementId = $element.id;
}

我知道可以从事件（v-on：click）中获取元素，但这不是事件，这是一种根据viewmodel的少数条件为元素返回CSS类的简单方法。它也应该是可计算的，但是问题是相同的。

第2327篇《在Vue.js中获取对方法中元素的引用》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答

GilL 2020.03.19

您可以通过三种方式获得对元素的引用

1.使用方法事件处理程序（doc）

模板：

<input type="text" v-model="dataField" v-bind:class="dataFieldClass" />

脚本：

dataFieldClass: function (e) {
    const element = e.target;
}

2.使用内联处理程序（doc） 模板：

 <input type="text" v-model="dataField" v-bind:class="dataFieldClass($event, otherArgument)" />

脚本：

dataFieldClass: function (e, otherArgument) {
    const element = e.target;
}

3.使用Refs（doc） 模板：

 <input type="text" v-model="dataField" v-bind:class="dataFieldClass" ref="el"/>

脚本：

dataFieldClass: function () {
    const element = this.$refs.el;
}

阳光小哥 2020.03.19

您可以从DOM事件对象获取引用。“ event.currentTarget”是引用分配了事件侦听器（vuejs方法）的元素的属性。

这是标准的DOM规范，但是您也可以在Vuejs中使用此属性。

dataFieldClass: function (event) {
    var elementId = event.currentTarget.id;
}

蛋蛋Itachi 2020.03.19

也许您可以使用ref？

<input type="text" v-model="dataField" v-bind:class="dataFieldClass" ref="el" />

并像这样使用它：

dataFieldClass: function () {
    var elementId = this.$refs.el;
}

请参阅此处的文档：https : //vuejs.org/v2/api/#ref

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android