Vue.js Cannot get correctly some element properties from $refs

Question

I cannot get correctly properties from a $refs, feedbacks welcome ...

Vue template

    <input name="title" ref="inputTitle" data-vv-delay="1000" v-validate.initial="'required|min:3'" :class="{'input': true, 'is-danger': errors.has('required') }" :value="title" @input="validating({ title: $event.target.value, id: id })"/>

console output

    console.log('REFS: ', this.$refs.inputTitle)
    REFS:
    <input data-v-44a1f54e name="title" data-vv-delay="1000" class="input" data-vv-id="_o6kpv3eo7" aria-required="true" aria-invalid="false">

    console.log('NAME: ', this.$refs.inputTitle.name)
    NAME:  title

BUT I get errors with :

    1 - property is not found however it exists...
    console.log('CLASS: ', this.$refs.inputTitle.class)
    CLASS:  undefined

    2- aria-invalid is checked as an infix-operator by Lint ...
    console.log('ARIA-INVALID: ', this.$refs.inputTitle.aria-invalid)
    http://eslint.org/docs/rules/space-infix-ops  Infix operators must be spaced
    http://eslint.org/docs/rules/no-undef         'invalid' is not defined

Bert · Accepted Answer · 2017-09-20 15:41:51Z

1

Use className instead of class. className is the attribute name in javascript.

this.$refs.inputTitle.aria-invalid is invalid javascript. Well, really its an expression trying to subtract the value invalid from this.$refs.inputTitle.aria. To get the aria attribute use:

this.$refs.inputTitle.getAttribute("aria-invalid")

Here is an example.

console.clear()

new Vue({
  el: "#app",
  mounted(){
    console.log(this.$refs.inputTitle.className)
    console.log(this.$refs.inputTitle.getAttribute("aria-invalid"))
  }
})

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <div ref="inputTitle" class="test" aria-invalid="false">Hello World</div>
</div>

edited Sep 20, 2017 at 15:41

answered Sep 20, 2017 at 15:29

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user762579 Over a year ago

thanks a lot ! I should have miss the point in teh doc ( about using javascript attributes ... and not what's inside the DOM element....

Collectives™ on Stack Overflow

Vue.js Cannot get correctly some element properties from $refs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related