我无法使用$refs获取表单元素

Question

我无法获取表单元素。我试图显示这个.$refs，但这个.$refs是空对象({}(。怎么了？

<template>
<view>
// some view
</view>
<view>
<form ref="myForm" v-on:submit:prevent="getFormId" report-submit>
</form>
</view>
</template>
<script>
data() {
return {
}
},
mounted() {
console.log(this.$refs);
console.log(this.$refs.myForm);
}
</script>

结果如下。 {} 定义

Answer 1

您只能访问组件的直接子级。如果您尝试访问的 ref 位于另一个组件内，则它将无法工作。您必须访问<View>组件上的引用。

Answer 2

有时我注意到使用连字符和区分大小写的引用存在问题。 如果您将其称为this.$refs['myForm']并且如果返回一个数组，会发生什么 在末尾添加[0]。 或者只是将引用更改为form. 但是，如果您尝试获取表单中的所有值，这是不正确的。

<template>
<form @submit:prevent="submit">
<input type="text" v-model="name" required autofocus>
<input type="email" v-model="email" required>
<button type="submit">Submit</button>
</form>
</template>
<script>
exports default {
data() {
return {
name: '',
email: '',
}
},
methods: {
submit() {
console.log({name: this.name, email: this.email });
}
},
};
</script>