Vue:如何根据单选按钮的选择显示不同的图像

Question

我遇到一个问题，如果使用Vuejs选择了单选按钮，我想显示不同的图像。它目前只显示错误状态的图像，因为我似乎无法以我尝试的方式检索按钮的状态。下面是一个有两个按钮的例子：

<template>
<div id="choose-route">
<label>
<input type="radio" name="Radio" id="choice1"
v-on:change="someMethodOne"
/>
<img
:src="checked ? 'icon_checked.png' : 'icon.png'"
/>
</label>
<label>
<input type="radio" name="Radio" id="choice2"
v-on:change="someMethodTwo"
/>
<img
:src="checked ? 'different_icon_checked.png' : 'different_icon.png'"
/>
</label>
</div>
</template>
<script>
export default {
methods: {
someMethodOne () {
// does something
},
someMethodTwo () {
// does another thing
}
}
}
</script>
<style>
</style>

如何根据单选按钮的选中状态更改图像？我已经用CSS做了，但这导致了另一个问题，因为我使用递归组件，这就是我现在在这里的原因。

Answer 1

使用v-model。当checked值发生变化时，您也可以使用watch执行某些操作。

Vue.js的网站上就有这样一个例子。

https://v2.vuejs.org/v2/guide/forms.html#Radio

new Vue({
el: "#app",
data: {
checked: null
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="radio" id="one" value='One' v-model="checked">
<label for="one">Option one</label>

<br>

<input type="radio" id="two" value="Two" v-model="checked">
<label for="two">Option two</label>

<br>

<span>Checked: {{ checked }}</span>

<br>

<span v-if="checked === 'One'">One is checked!</span>
<span v-else-if="checked === 'Two'">Two is checked!</span>
</div>