admin管理员组

文章数量:1133757

I have a component, how can I select one of its elements?

I'm trying to get an input that is within this component's template.

There could be multiple components so the querySelector must only parse the current instance of the component.

Vueponent('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

I have a component, how can I select one of its elements?

I'm trying to get an input that is within this component's template.

There could be multiple components so the querySelector must only parse the current instance of the component.

Vue.component('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

• javascript
• vue.js

Share Improve this question Follow edited Feb 23, 2021 at 12:38 cobrexus 4,78855 gold badges2323 silver badges4949 bronze badges asked May 8, 2016 at 20:07 SnewedonSnewedon 2,46022 gold badges1414 silver badges2727 bronze badges

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 187

vuejs 2

v-el:el:uniquename has been replaced by ref="uniqueName". The element is then accessed through this.$refs.uniqueName.

There's a few options depending on what you're trying to access:

• You can access the child components of a Vue.js component with this.$children

• You can label specific DOM elements inside your template using ref="uniqueName" and refer to these later via this.$refs.uniqueName
  (but remember that you won't be able to refer to these until the component/app has finished mounting and performed an initial render)

• If you're unable to label your elements, you can query the DOM for child elements using a CSS selector via this.$el.querySelector('.myClass > .childElement')
  (as above, the component/app needs to have finished mounting)

You can also explore by doing a simple console.log(this) inside your component and it will show you all the properties of your Vue component instance.

The answers are not making it clear:

Use this.$refs.someName, but, in order to use it, you must add ref="someName" in the parent.

See demo below.

new Vue({
  el: '#app',
  mounted: function() {
    var childSpanClassAttr = this.$refs.someName.getAttribute('class');
    
    console.log('<span> was declared with "class" attr -->', childSpanClassAttr);
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <span ref="someName" class="abc jkl xyz">Child Span</span>
</div>

$refs and v-for

Notice that when used in conjunction with v-for, the this.$refs.someName will be an array:

new Vue({
  el: '#app',
  data: {
    ages: [11, 22, 33]
  },
  mounted: function() {
    console.log("<span> one's text....:", this.$refs.mySpan[0].innerText);
    console.log("<span> two's text....:", this.$refs.mySpan[1].innerText);
    console.log("<span> three's text..:", this.$refs.mySpan[2].innerText);
  }
})

span { display: inline-block; border: 1px solid red; }

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  Parent.
  <div v-for="age in ages">
    <span ref="mySpan">Age is {{ age }}</span>
  </div>
</div>

In Vue2 be aware that you can access this.$refs.uniqueName only after mounting the component.

Composition API

Template refs section tells how this has been unified:

• within template, use ref="myEl"; :ref= with a v-for
• within script, have a const myEl = ref(null) and expose it from setup

The reference carries the DOM element from mounting onwards.

Vue 2.x

For Official information:

https://v2.vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

A simple Example:

On any Element you have to add an attribute ref with a unique value

<input ref="foo" type="text" >

To target that elemet use this.$refs.foo

this.$refs.foo.focus(); // it will focus the input having ref="foo"

本文标签： javascriptVuejs getting an element within a componentStack Overflow