在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. 使用方法事件处理程序 ( 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.与参考（文档）

模板：

 <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模式呢？放入ref="someName"您的DOM元素，并使用this.$refs["someName"]（可以将其'someName'作为参数传递给您的方法）在您的方法中进行访问。

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

这不是一个好的方法，主要是因为它有一个主要缺点：第一次渲染Vue时没有$ refs（因为该元素还不存在）。因此，您应该强制Vue渲染两次。

如果v-for循环中有多个元素，则this。$ refs [“ 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>