Vue：单击按钮时重置所选表单

在Vue中，可以使用$refs来获取表单并将其重置。为了在单击按钮时触发表单重置，需要为按钮添加一个@click事件处理程序，并在其中 调用 表单的reset()方法。

例如，假设我们有一个涵盖多个表单的组件，并且我们想在单击按钮时重置其中的一个表单。我们可以添加类似于以下代码的组件及其html：

<tem pl ate> <h3>Contact Form</h3> <form ref="form" @submit.prevent="submitForm"> <input type="text" pl aceholder="Name" v-model="name"> <input type="em ai l" pl aceholder="Em ai l" v-model="em ai l"> <button type="submit">Submit</button> </form> <button @click="resetForm">Reset</button> </tem pl ate>

<s cr i pt > export default { data() { return { name: '', em ai l: '' methods: { submitForm() { // handle form submission here resetForm() { this.$refs.form.reset() </s cr i pt >

在上面的代码中，我们将表单包装在一个 <div> 元素内，并在表单上添加了一个submit事件处理程序和一个resetForm方法。我们为重置按钮添加了另一个事件处理程序，该处理程序在单击时 调用 resetForm方法以重置表单。

请注意，在resetForm方法中，我们使用了this.$refs.form来获取form元素，并 调用 了其reset方法来重置表单。这里的this.$refs表示对组件实例的引用（即当前Vue实例）。由于我们给表单添加了一个 ref="form" 属性，因此可以通过this.$refs.form来获取对表单的引用。

这是一个简单的示例，但是类似的方法可以用于重置任何表单。