2025-01-06 旅行分帳應用程式-步驟07

發表於 閱讀次數：
2025-01-06 旅行分帳應用程式-步驟07

2025-01-06 旅行分帳應用程式-步驟07

成員名字的左邊加上一個「❌」按鈕來刪除成員

你想在成員名字的左邊加上一個「❌」按鈕來刪除成員，我來幫你一步步加上去 ✅

✅ 第一步：在模板中每個成員左邊加「刪除按鈕」

請修改這一段 template 的 <li>：

原本：

1
2
3
4
5
6
7
8
<li v-for="(member, index) in members"
    :key="index" @click="selectMember(index)"
    :class="{ selected: selectedMemberIndex === index }">
  {{ member.name }} <span class="owe">應付 $0</span>
  <div v-if="selectedMemberIndex === index" class="add-expense-section">
    <button class="btn small-btn" @click.stop="showAddExpense = true">➕ 支出</button>
  </div>
</li>

改成這樣 ⬇（重點在加上 ❌ 按鈕）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<li v-for="(member, index) in members"
    :key="index" :class="{ selected: selectedMemberIndex === index }">
  <!-- ❌ 刪除按鈕 -->
  <button class="btn delete-btn small-delete" @click.stop="deleteMember(index)">❌</button>

  <!-- 成員姓名與應付金額 -->
  <div @click="selectMember(index)" style="flex-grow: 1; display: flex; justify-content: space-between;">
    {{ member.name }} <span class="owe">應付 $0</span>
  </div>

  <!-- 支出按鈕 -->
  <div v-if="selectedMemberIndex === index" class="add-expense-section">
    <button class="btn small-btn" @click.stop="showAddExpense = true">➕ 支出</button>
  </div>
</li>

✅ 第二步：在 <script setup> 加入 deleteMember 方法

1
2
3
4
5
6
7
8
function deleteMember(index) {
  members.value.splice(index, 1)
  // 若刪除的是選取成員，取消選取
  if (selectedMemberIndex.value === index) {
    selectedMemberIndex.value = null
    showAddExpense.value = false
  }
}

✅ 第三步：給刪除按鈕一些樣式（optional）

在你的 <style scoped> 中加上這段：

1
2
3
4
5
6
.small-delete {
  background-color: #e74c3c;
  padding: 4px 6px;
  font-size: 12px;
  margin-right: 8px;
}

🧪 最終效果

  • 每個成員左邊會出現一個小小的 ❌ 按鈕。
  • 點了之後會刪除該成員。
  • 點成員右邊區域可選取並開啟支出按鈕。

需要順便一起把「應付 $0」的計算功能做出來嗎？可以自動算出誰應該出多少～