vue 阻止el-radio事件冒泡

原代码

<li v-for="(item, index) in listData" :key="index" @click="changeGame(item)">
  <span><img :src="item.portrait" :alt="item.name" /></span>
  <span>{{ item.name }}</span>
  <span>
    <el-radio
      v-model="selected"
      :label="item.id"
    ></el-radio>
  </span>
</li>

点击 el-radio 的时候发现 changeGame 触发了两次，最后做了以下修改。

<li v-for="(item, index) in listData" :key="index" @click="changeGame(item)">
  <span><img :src="item.portrait" :alt="item.name" /></span>
  <span>{{ item.name }}</span>
  <span @click.stop>
    <el-radio
      @change="changeGame(item)"
      v-model="selected"
      :label="item.id"
    ></el-radio>
  </span>
</li>

data() {
    return {
      selected: 0,
      listData: []
    };
},
methods: {
    changeGame(item) {
        console.log(item);
        this.selected = item.id;
    }
}

算是比较折中的方案，如果有更好的方案欢迎告知。。