Vue.js无法正确地从$refs获得某些元素属性

Question

我无法从$refs获得正确的属性，反馈欢迎.

Vue模板

    <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.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

，但我得到了错误:

    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

Answer 1

使用className而不是class。className是javascript中的属性名。

this.$refs.inputTitle.aria-invalid无效的javascript。实际上，它是一个表达式，试图从invalid中减去值this.$refs.inputTitle.aria。要获得aria属性，请使用：

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

下面是一个例子。

​

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/vue@2.4.2"></script>
<div id="app">
  <div ref="inputTitle" class="test" aria-invalid="false">Hello World</div>
</div>

​