Updating buttons depending on the selected radio button not working properly

Hey there,

I have a component where I want to update the content of two buttons depending on the selected radio button.
It does work but strangely enough one click too late (the buttons show the content of the radio button that was selected before the last click) or only when I doublelick the radio button.

Anyone who knows what’s causing this?

My code:

The radio buttons:

<section class="container">
		<div class="app-paper">
			<form action="">
			<!-- Steel -->
			<input type="radio" name="Steel" id="1" class="hidebox" value="Steel" v-model="material" @click="updateSlabSystem">
			<label for="1" class="lbl-radio">
				<div class="display-box">
					<img class="icon" src="imgs/material-icons/steel-black.png">
					<div class="slab-system">Steel</div>
				</div>
			</label>
			<!-- Concrete -->
			<input type="radio" name="Concrete" id="2" class="hidebox" value="Concrete" v-model="material"  @click="updateSlabSystem">
			<label for="2" class="lbl-radio">
				<div class="display-box">
					<img class="icon" src="imgs/material-icons/concrete-black.png">
					<div class="slab-system">Concrete</div>
				</div>
			</label>
			<!-- Timber -->
			<input type="radio" name="Timber" id="3" class="hidebox" value="Timber" v-model="material" @click="updateSlabSystem">
			<label for="3" class="lbl-radio">
				<div class="display-box">
					<img class="icon" src="imgs/material-icons/timber-black.png">
					<div class="slab-system">Timber</div>
				</div>
			</label>
			<!-- Hybrid -->
			<input type="radio" name="Hybrid" id="4" class="hidebox" value="Hybrid" v-model="material" @click="updateSlabSystem">
			<label for="4" class="lbl-radio">
				<div class="display-box">
					<img class="icon" src="imgs/material-icons/composite-black.png">
					<div class="slab-system">Hybrid</div>
				</div>
			</label>
		</form>
		</div>
	</section>

The buttons that should get updated:

		<!-- Slab System -->
	<div class="inputFields">
		<p class="inputText">Slab System</p>
		<input class="radio-button-system" type="radio" id="plate" name="system">
		<label class="radio-button-system-label" for="plate">
				{{ plateSystem }}
		</label> 
		<input class="radio-button-system" type="radio" id="beam" name="system">
		<label class="radio-button-system-label" for="beam">
				{{ beamSystem }}
		</label> 
	</div>

The method

export default {
  data() {
return {
	plateSystem: 'Plate',
	beamSystem: 'Beam',
	material: ''

};
},
methods: {
updateSlabSystem() {
		if(this.material == 'Steel')
		{
			this.plateSystem = "Slim Floor"
			this.beamSystem = "Composite Beams"
		}
		else if(this.material == 'Concrete')
		{
			this.plateSystem = "Flat Slab"
			this.beamSystem = "T-Beams"
		}
		else if(this.material == 'Timber')
		{
			this.plateSystem = "CLT Slab"
			this.beamSystem = "Timber Joists"
		}
		else if(this.material == 'Hybrid')
		{
			this.plateSystem = "HBV Slab"
			this.beamSystem = "CLT on Steelframe"
		}

		console.log(this.plateSystem )
		console.log(this.beamSystem )
	},
}
}

Because the value hasn’t changed when your click event fires. There’s a few different ways to tackle this, but probably the simplest would be to use a watcher against material.

So you’d remove @click="updateSlabSystem" from all your input’s and use:

watch: {
  material: 'updateSlabSystem'
}
1 Like

Awesome, thank you @JamesThomson !!
Worked like a charm :pray: