'Show and hide info depending on option selected
i'm trying to do a price table where the price show depending on the hours selected, right know my code shows all the information i want but i can't hide the info that is show by default
I tried with a v-if but shows me both prices and not the hourly price
This is how i send the data and the model is by default empty
prices: [
{
"id": 1,
"name_package": "10 Hours",
"price_package": "$2500",
"link": "https://subscriptions.zoho.com/subscribe/f51eeedc48b6c02c3be2cd3ea85e1d052d1433f07e0c1f74ad482bf477cf719e/250TUTOR10"
},
{
"id": 2,
"name_package": "20 Hours",
"price_package": "$5500",
"link": "https://subscriptions.zoho.com/subscribe/f51eeedc48b6c02c3be2cd3ea85e1d052d1433f07e0c1f74ad482bf477cf719e/250TUTOR10"
}
],
priceSelected: {}
This is the code i use to show the information
<h5>Tutoring</h5>
<small>Starting at</small>
<h2 v-if="priceSelected !== null">{{priceSelected.price_package}}</h2>
<h2 v-else>$225<small>/HOURLY</small></h2>
<button class="btn btn-sm btn-primary" >
Start Today
</button>
<select v-model="priceSelected" class="form-control" id="price">
<option value="null" disabled>Select Package</option>
<option v-for="price in prices" :key="price.id" :value="price">{{price.name_package}}</option>
</select>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|