Question

我是Vue.js的新手，我想我错过了它的工作方式。我正在尝试构建以下内容：

从REST API - 完成
使用v-for - 完成
允许用户点击其中一个按钮/计划以将其标记为已选择

我在自举列中打印按钮的代码：

<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"？ / p>

谢谢。

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>

然后确保在chosenPlan方法中设置pickPlan(planId)。

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>

Vue.js：根据数组数据在v-for中设置HTML属性

2 个答案: