Question

如何引用在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类。它也应该是可计算的，但问题是一样的。

Answer 1

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

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。引用（doc）

模板：

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

脚本：

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

Answer 2

也许你可以使用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

Answer 3

使用ref pattern怎么样？将SharedPreferences.Editor editor; // ^^^^^^^^^^ declare it outside @Override public void onCreate() { super.onCreate(); editor=getSharedPreferences("DateStep",MODE_PRIVATE).edit(); // initialize editor }放入您的DOM元素，然后使用ref="someName"在您的方法中访问它（您可以将this.$refs["someName"]作为参数传递给您的方法。）

请注意，这不是一个非常好的模式，除非由于某种原因你确实需要DOM元素。否则只需将相关参数传递给您的方法。

这不是一个好方法，主要是因为它有一个主要缺点：第一次渲染vue时没有$ refs（因为元素还没有出现）。所以你应该强制vue渲染两次。

如果你在v-for循环中有多个元素，那么这个。$ refs [“someName”]就变成了一个数组。你可以通过一些改编来实现它，这是一个例子：

'someName'

new Vue({
  el: '#app',
  data() {
    return {
      fields: [{
          name: 'field1',
          value: 'value1'
        },
        {
          name: 'field2',
          value: 'value2'
        }
      ]
    };
  },
  methods: {
    dataFieldClass(index) {
      if (!this.$refs.fields) {
        // First render, the element is not there yet
        return '';
      } else {
        // Here is the element
        console.log(this.$refs.fields[index]);
      }
    }
  },
  mounted() {
    // Force the instance to render a second time
    this.$forceUpdate();
  }
});

Answer 4

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

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

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

Answer 5

一种直接的解决方案是将引用传递给要调用的方法中的元素。

这是对我有用的东西（一个非常基本的示例，可以帮助您理解）：

new Vue({
  el: '#app',
  data: {
    msg: '',
  },
  methods: {
    // in order to access the HTML element,
    // add an argument (namely 'event') in the method definition,
    // and access the element's current value by `event.target.value`
    updateValue: function(event) {
      this.msg = event.target.value;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="msg" @input="updateValue" autofocus>
  <br/>
  <h2>
    >>> {{ msg }}
  </h2>
</div>

Answer 6

这似乎对我有用，使用ref（如果元素嵌套在另一个元素中）

<div ref="element">

vm.$refs.element

或$ el（如果目标元素位于最外面）

<template><div class="targeted-element">

this.$el

Answer 7

您可以使用此处其他答案中提到的引用。

请记住，refs 不能应用于计算对象。所以在使用 refs 时要小心

在Vue.js

7 个答案: