Vue.js：配列データに基づいてv-for内にHTML属性を設定します

Question

Vue.jsを初めて使用しています。 v-forとボタンなどのプランを表示し

を行って - - RESTのAPI から計画のリストを取得

2. を行って、ユーザーがクリックすることを許可する：私は、次を構築しようとしています
   0123：これらのボタンのいずれかに/ブートストラップ・カラム内のボタンを印刷する

私のコードを選択したとして、それをマークすることを計画

<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

あなたはVueのコンポーネントで利用可能な任意のデータにvariant属性をバインドするかのように、インラインの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

一つの方法は、計画オブジェクトを拡張し、それに余分呼ばれるバリアントを追加したり、拾い、あなたソリューションを実装し、doesnのは簡単ですテンプレートにバリアント属性にバインドする

<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>