Vue:如何根据RadioButton选择显示不同的图像

Question

我面临着一个问题，如果用Vuejs选择了一个单选按钮，我想要显示一个不同的图像。它目前只显示false状态的图像，因为我似乎不能以我尝试的方式检索按钮的状态。下面是一个包含两个按钮的示例：

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

​