web-dev-qa-db-ja.com

対応するvue.jsコンポーネントへのDOM要素

DOM要素に対応するvue.jsコンポーネントを見つけるにはどうすればよいですか？

私が持っている場合

element = document.getElementById(id);

JQuery $(element)と同等のvueメソッドはありますか？

javascriptdomvue.js
48
Ghigo

適切な方法は、v-elディレクティブを使用して参照することです。その後、this.$$[reference]を実行できます。

vue 2の更新

Vueでは、2つの参照が要素とコンポーネントの両方に使用されます。 http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced

44
blockhead

これだけで（「メソッド」のメソッドで）：

element = this.$el;

:)

41
Kamil Kiełczewski

Vue.js 2のVueインスタンス内またはコンポーネント：

  • this.$elを使用して、インスタンス/コンポーネントがマウントされたHTMLElementを取得します

HTMLElementから：

  • HTMLElement から.__vue__を使用します
    • 例えば。 var vueInstance = document.getElementById('app').__vue__;

VNodeという変数にvnodeを含めると、次のことができます。

  • vnode.Elmを使用して、VNodeがレンダリングされた要素を取得します
  • vnode.contextを使用して、VNodeがログインするVueインスタンスを取得します
  • vnode.componentInstanceを使用して、VNodeが対象とするComponentインスタンスを取得します

ソース、文字通り： vue/flow/vnode.js .

実行可能なデモ：

Vue.component('my-component', {
  template: `<input>`,
  mounted: function() {
    console.log('[my-component] is mounted at element:', this.$el);
  }
});

Vue.directive('customdirective', {
  bind: function (el, binding, vnode) {
    console.log('My Element is:', vnode.Elm);
    console.log('My componentInstance is:', vnode.componentInstance);
    console.log('My Vue Instance is:', vnode.context);
  }
})

new Vue({
  el: '#app',
  mounted: function() {
    console.log('This Vue instance is mounted at element:', this.$el);
    
    console.log('From the element to the Vue instance:', document.getElementById('app').__vue__);
    console.log('Vue component instance of my-component:', document.querySelector('input').__vue__);
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<h1>Open the browser's console</h1>
<div id="app">
  <my-component v-customdirective=""></my-component>
</div>
18
acdcjunior

DOM要素から開始する場合は、その要素の__vue__プロパティを確認してください。すべてのVueビューモデル（コンポーネント、v-repeat使用法によって作成されたVM）にはこのプロパティがあります。

ブラウザの開発者コンソール（少なくともFirefoxおよびChrome）で「要素の検査」機能を使用して、DOMプロパティを表示できます。

お役に立てば幸いです！

11
BigBlueHat

V-refはディレクティブではなく、特別な属性であるため、動的に定義することもできます。これは、v-forと組み合わせて使用​​すると特に便利です。

例えば：

<ul>
    <li v-for="(item, key) in items" v-on:click="play(item,$event)">
        <a v-bind:ref="'key' + item.id" v-bind:href="item.url">
            <!-- content -->
        </a>
    </li>
</ul>

Vueコンポーネントで使用できます

var recordingModel = new Vue({
  el:'#rec-container',
  data:{
    items:[]
  },

  methods:{
    play:function(key,e){
      // it contains the bound reference
      console.log(this.$refs['item'+key]);
    }
  }
});
4
Kathan Shah

したがって、$0.__vue__はHOC（高次コンポーネント）ではあまりうまく機能しないと考えました。

// ListItem.vue
<template>
    <vm-product-item/>
<template>

上記のテンプレートから、ListItemコンポーネントがあり、そのルートにProductItemがあり、コンソールで$0.__vue__を試すと、結果は予期せずListItemインスタンスになります。

ここで、最低レベルのコンポーネント（この場合はProductItem）を選択するソリューションを得ました。

プラグイン

// DomNodeToComponent.js
export default {
  install: (Vue, options) => {
    Vue.mixin({
      mounted () {
        this.$el.__vueComponent__ = this
      },
    })
  },
}

インストール

import DomNodeToComponent from'./plugins/DomNodeToComponent/DomNodeToComponent'
Vue.use(DomNodeToComponent)

つかいます

  • ブラウザコンソールでdom要素をクリックします。
  • $0.__vueComponent__と入力します。
  • コンポーネントで何でもやります。データにアクセスします。変更を行います。 e2eから公開メソッドを実行します。

ボーナス機能

さらに必要な場合は、$0.__vue__.$parentを使用できます。 3つのコンポーネントが同じdomノードを共有する場合、メインコンポーネントを取得するには$0.__vue__.$parent.$parentを記述する必要があります。このアプローチは、より簡潔なものですが、より優れた制御を提供します。

3
Yauheni Prakopchyk

このスニペットを見つけました here 。 __vue__プロパティが見つかるまでDOMノード階層を上に行くという考え方です。

function getVueFromElement(el) {
  while (el) {
    if (el.__vue__) {
      return el.__vue__
    } else {
      el = el.parentNode
    }
  }
}

Chromeの場合：

Usage in Chrome

0
bernie
  • this.$el-コンポーネントのルート要素を指します
  • this.$refs.<ref name> + <div ref="<ref name>" ...-ネストされた要素を指します

???? $el/$refsは、 vueライフサイクル のmounted()ステップの後にのみ使用します

<template>
    <div>
        root element
        <div ref="childElement">child element</div>
    </div>
</template>

<script>
    export default {
        mounted() {
            let rootElement = this.$el;
            let childElement = this.$refs.childElement;

            console.log(rootElement);
            console.log(childElement);
        }
    }
</script>

<style scoped>
</style>

enter image description here

0
Jossef Harush