Vue.jsのメソッドの要素への参照を取得する

Question

Vue.jsでメソッドを起動した要素への参照を取得するにはどうすればよいですか？ このようなHTML私がしている：

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

そして、私のVue.jsでは、私はこの方法持っているのViewModel：

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

を、私はそれがイベント（V-onから要素を取得することは可能だということを知っている：クリックしてください）、これはイベントではなく、viewmodelのいくつかの条件に従って要素のCSSクラスを返す単純なメソッドです。それも計算可能であるべきですが、問題は同じです。

Answer 1

あなたは、単にあなたが

dataFieldClass (reference) { 
    var elementId = reference 
} 

Answer 2

たぶん、あなたはrefを使用することができ、それをキャッチすることができ、あなたの方法

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

に引数を渡すことができますか？このような

<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の使用に関する。 ref="someName"をDOM要素に置き、メソッド内でthis.$refs["someName"]を使用してアクセスします（メソッドにパラメータとして'someName'を渡すことができます）。

何らかの理由で本当にDOM要素が必要な場合を除いて、これはあまり良いパターンではありません。それ以外の場合は、関連するパラメータをメソッドに渡します。

主に欠点があるため、良い方法ではありません。最初にvueがレンダリングされたとき（要素がまだ存在しないため）、$ refsはありません。したがって、vueを強制的に2回レンダリングする必要があります。

v-forループ内に複数の要素がある場合、これは$ 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>