VUE3中实现点击按钮往表单中添加数据

在Vue3中，你可以通过事件监听和双向数据绑定轻松地实现点击按钮向表单中添加数据。下面是一个基本的例子，假设有一个包含输入框和按钮的表单，点击按钮时会在现有数据基础上追加新的值：

<template>
  <form ref="myForm">
    <div>
      <label for="inputField">输入字段:</label>
      <input type="text" id="inputField" v-model="formData" />
    </div>
    <button @click.prevent="addData">添加</button>
    <ul>
      <li v-for="item in formDataList" :key="item.id">{{ item.value }}</li>
    </ul>
  </form>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 初始化表单数据
const formData = ref('');
const formDataList = ref([]);

// 数据列表初始状态可以为空
onMounted(() => {
  formDataList.value = [];
});

// 点击添加按钮的方法
function addData() {
  // 如果formData有值并且不是空字符串
  if (formData.value !== '') {
    // 创建新的数据对象
    const newData = { id: formDataList.value.length + 1, value: formData.value };
    // 添加到formDataList
    formDataList.value.push(newData);
    // 清空输入框
    formData.value = '';
  }
}

// 当表单提交时阻止默认行为（防止默认的提交操作）
onSubmit(e) {
  e.preventDefault();
}
</script>

<style scoped>
form {
  display: flex;
  gap: 10px;
}

button {
  margin-top: 10px;
}
</style>

在这个示例中，当你在输入框中输入并点击“添加”按钮时，新值会被添加到`formDataList`数组中，同时，输入框的内容会被清空。`ref`属性用于获取表单元素，`v-model`用于实时绑定数据，`@click.prevent`阻止了按钮的默认点击动作，避免表单提交。