我正在使用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我应该改变什么?
2条答案
按热度按时间h7appiyu1#
您可以向removeSection函数发送一个参数(例如:索引)之后,一旦你点击删除按钮,你就会知道哪个索引应该被删除。你将能够在你的节中找到你想删除的项目。
yftpprvb2#
您可以使用id和value定义类似对象数组的部分:
第一个