Question

我无法获取表单元素。我试图显示this。$ refs，但是this。$ 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

您只能访问组件的直接子代。如果您尝试访问的引用在另一个组件内部，则它将不起作用。您将必须访问<View>组件上的ref。

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>

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

2 个答案: