vue.js V-表示移除元件

xoshrz7s  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(164)

我正在使用Vue/Quasar应用程序,我想做的是在页面加载时只显示一次以下布局:

<template>
  <div v-for="(section, index) in sections" :key="index">
    <div class="row q-gutter-md">
      <q-input v-model="sectionName" 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" />
        </template>
      </q-input>
    </div>
  </div>
</template>

下面是脚本部分的代码片段:

setup() {
    const sections = ref(1);
    const addNew = () => {
      sections.value++
    };
    const removeSection = () => {
     //...
    };
    return{
     //...}

addNew函数运行良好:新的部分将被添加到屏幕上。2但是我如何删除一个特定的(被点击的)部分呢?3我应该改变什么?

h7appiyu

h7appiyu1#

您可以向removeSection函数发送一个参数(例如:索引)之后,一旦你点击删除按钮,你就会知道哪个索引应该被删除。你将能够在你的节中找到你想删除的项目。

yftpprvb

yftpprvb2#

您可以使用id和value定义类似对象数组的部分:
第一个

相关问题