I'm struggling to add an active class to a list item in a template component when it's clicked, making sure that only one item can have the class at a time.
I've attempted different solutions such as passing a new data object on click and referencing it, but nothing seems to work. Even the example provided in the official documentation doesn't give me any clues on why it's not working.
Vue.component('delivery-options', {
props: ['deliveries'],
template: '<li><p><strong>{{ deliveries.price }}</strong>{{ deliveries.title }}</p><p>{{ deliveries.desc }}</p></li>'
})
Vue.component('ledger', {
props: ['values'],
template: '<li><p>{{ values.title }}<span>{{ values.price }}</span></p></li>'
})
var checkout = new Vue({
el: '#checkout-app',
data: {
deliveryList: [
{ id: 0, price: '£3.99 ', title: 'Home delivery', desc: 'Lorem ipsum dolor sit amet.' },
{ id: 1, price: 'Free ', title: 'Store collection', desc: 'Lorem ipsum dolor sit amet.' },
{ id: 2, price: '£5.99 ', title: 'Precise delivery', desc: 'Lorem ipsum dolor sit amet.' }
],
valuesList: [
{ id: 0, price: '£1233.99', title: 'Order value', desc: 'Lorem ipsum dolor sit amet.' },
{ id: 1, price: '£3.99', title: 'Delivery', desc: 'Lorem ipsum dolor sit amet.' },
{ id: 2, price: '£5.99', title: 'Total', desc: 'Your total including delivery.' }
]
}
})ul {
padding: 0;
}
ul li {
list-style-type: none;
}
.delivery-options li {
padding: 1rem;
margin: 1rem;
border-radius: 3px;
border: 1px solid grey;
}
.ledger {
padding: 1rem;
margin: 1rem;
border-radius: 3px;
border: 1px solid grey;
}<script src="https://unpkg.com/vue"></script>
<div id="checkout-app">
<ul class="delivery-options">
<delivery-options
v-for="option in deliveryList"
v-bind:deliveries="option"
v-bind:key="option.id">
</delivery-options>
</ul>
<ul class="ledger">
<ledger
v-for="value in valuesList"
v-bind:values="value"
v-bind:key="value.id">
</ledger>
</ul>
</div>