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

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)获得元素，但这不是事件，它是根据视图模型的几个条件返回元素的CSS类的简单方法。它也应该是可计算的，但问题是一样的。

Answer 1

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

使用方法事件处理程序(文档)的1

模板：

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

剧本：

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

带有内联处理程序(文档)的2

模板：

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

剧本：

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

带参(文档)的3

模板：

 <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://v2.vuejs.org/v2/api/#ref

Answer 3

那么使用参考模式呢？将ref="someName"放入DOM元素，并在方法中使用this.$refs["someName"]访问它(您可以将'someName'作为参数传递给您的方法)。

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

这不是一个很好的方法，主要是因为它有一个主要的缺点:第一次呈现vue时没有$refs (因为元素还没有出现)。所以你应该强迫vue渲染两次。

如果在一个v-for循环中有多个元素，那么这个.ref“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();
  }
});

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

<div id="app">
  <label v-for="(field, index) in fields">
    {{ field.name }}:
    <input ref="fields" :value="field.value" v-bind:class="dataFieldClass(index)">
  </label>
</div>

​