Vue.js：根據數組數據在v-for中設置HTML屬性

Question

我是Vue.js的新手，我想我錯過了它的工作方式。 我正在嘗試構建以下內容：

1. 從REST API獲取計划列表- 完成
2. 使用v-for -done將計划顯示為按鈕
3. 允許用戶單擊其中一個按鈕/計划以將其標記為已選擇

我在代碼中打印bootstrap列中的按鈕：

<b-col lg="4" class="plan" v-for="plan in plans" :key="plan.id">
<b-button block variant="secondary" v-on:click="pickPlan(plan.id)">
    <p class="price">€ {{plan.price}}</p>
    <p class="plan">{{plan.name}}</p>
</b-button>

我的問題 ：如果用戶點擊某個按鈕，它如何改變該按鈕中的屬性variant="primary"並將所有其他設置為variant="secondary" ？

謝謝。

Answer 1

您可以將variant屬性綁定到Vue組件上可用的任何數據，或將其與內聯JavaScript一起使用，如下所示：

<b-col lg="4" class="plan" v-for="plan in plans" :key="plan.id">
    <b-button block :variant="plan.id === chosenPlan.id ? 'primary' : 'secondary'" v-on:click="pickPlan(plan.id)">
        <p class="price">€ {{plan.price}}</p>
        <p class="plan">{{plan.name}}</p>
    </b-button>
</b-col>

然后確保在pickPlan(planId)方法中設置chosenPlan 。

Answer 2

解決它的一種方法是擴展計划對象並向其添加額外的名為variant或pick並使用此屬性綁定到模板中的variant屬性

<template>
  <div>
    <b-col lg="4" class="plan" v-for="plan in plans" :key="plan.id">
      <b-button block v-bind:variant="picked ? 'primary' : 'secondary'" v-on:click="pickPlan(id)">
          <p class="price">€ {{plan.price}}</p>
          <p class="plan">{{plan.name}}</p>
      </b-button>
    </b-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      plans: [
        { id: 1, name: 'Plan name 1', price: 12.00, picked: false },
        { id: 2, name: 'Plan name 2', price: 24.00, picked: true },
      ]
    }
  },
  methods: {
    pickPlan(id) {
      this.plans = this.plans.map(p => {
        if(p.id === id) {
          return { ...p, picked: true }
        }
        return { ...p, picked: false }
      })
    }
  }
}
</script>