Article

Vue3点击按钮添加文本框

306 字2 分钟阅读 --发布 2026-03-01

在已有 Vue 3 + Element Plus 项目中，把下面保存为 SpotEditor.vue。先完成添加、删除和 JSON 预览，再接入自己的保存接口。

<script setup>
import { ref } from 'vue'

let nextId = 1
const spots = ref([{ id: nextId++, name: '' }])
const preview = ref('')

function addSpot() {
  spots.value.push({ id: nextId++, name: '' })
}

function removeSpot(id) {
  spots.value = spots.value.filter(spot => spot.id !== id)
}

function previewData() {
  const payload = { nameList: spots.value.map(spot => spot.name.trim()) }
  preview.value = JSON.stringify(payload, null, 2)
}
</script>

<template>
  <el-form>
    <el-form-item v-for="(spot, index) in spots" :key="spot.id" :label="`景点 ${index + 1}`">
      <el-input v-model="spot.name" />
      <el-button type="danger" @click="removeSpot(spot.id)">删除</el-button>
    </el-form-item>
    <el-button @click="addSpot">添加景点</el-button>
    <el-button type="primary" @click="previewData">预览数据</el-button>
    <pre v-if="preview">{{ preview }}</pre>
  </el-form>
</template>