Vue/Quasar项目中如何删除V-for循环内指定的Section？

数据老陈

2026-8-13

Vue/Quasar 实现指定section删除功能的修改方案

你当前的问题核心在于用数字类型的sections控制渲染，没法精准定位要删除的单个section，同时单个sectionName会导致所有输入框绑定同一值，得从模板和脚本两部分修改：

1. 模板部分修改

把遍历对象改成数组元素，给删除按钮传递当前section的索引，同时每个section绑定自己的输入值：

<template>
  <div v-for="(section, index) in sections" :key="index">
    <div class="row q-gutter-md">
      <q-input v-model="section.name" bottom-slots dense :label="labelText">
        <template v-slot:append>
          <q-btn flat dense icon="add" color="grey" @click="addNew" />
          <q-btn flat dense icon="delete" color="grey" @click="removeSection(index)" />
        </template>
      </q-input>
    </div>
  </div>
</template>

2. 脚本部分修改

将sections改为数组类型，初始化时添加一个默认section；removeSection接收索引参数，删除对应元素（保留至少一个section）：

setup() {
  // 初始化数组，默认包含一个section
  const sections = ref([{ name: '' }]);
  const addNew = () => {
    // 新增section时往数组里push新对象
    sections.value.push({ name: '' });
  };
  const removeSection = (index) => {
    // 确保至少保留一个section
    if (sections.value.length > 1) {
      sections.value.splice(index, 1);
    }
  };
  return {
    sections,
    addNew,
    removeSection,
    // 记得返回labelText等其他需要的变量
    labelText: 'Section Name'
  };
}