Question

我尝试使用一组单选按钮设置一个简单的Vue实例。目标是，如果用户点击已经选中的单选按钮，它将取消选中相应的单选按钮。但是我还没有使用Vue做到这一点。到目前为止，这是我的代码：

HTML：

<div id="app">
    <div v-for="(val, key) in list">
        <input type="radio" name="radio" :value="val" v-model="selected" :id="val">
        <label :for="val" @click="uncheck( val )">{{ val }}</label>
    </div>
    <button @click="uncheckAll">Uncheck all</button>
</div>

JS：

var app = new Vue({
        el: '#app',
        data : {
            list: [ 'one', 'two', 'three' ],
            selected: 'two',
        },
        methods : {
            uncheck: function( val ){
                console.log( val, this.selected );
                if ( val == this.selected ){
                    this.selected = false;
                }
            },
            uncheckAll: function(){
                this.selected = false;
            }
        }
})

似乎调用了uncheck方法，但是单选按钮会触发change事件，然后再次更新selected的值。 uncheckAll方法按预期工作，可能是因为它没有使用v-model与数据绑定。

任何有关此工作的提示或建议？这是我为此示例创建的一支笔：official docs for pygame.font.Sysfont()

Answer 1

难点在于v-model正在更改selected的值，然后才能检查它以查看其先前的值。你需要另一个变量。

这个想法是：当你点击一个项目时，它会检查它是否与previouslySelected（而不是selected）匹配。如果匹配，则取消选择。然后将previouslySelected设置为selected的值。

click处理程序应该在输入上，而不是在标签上;无论如何，标签的功能是将点击转发到输入。

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    selected: 'two',
    previouslySelected: 'two'
  },
  methods: {
    uncheck: function(val) {
      if (val === this.previouslySelected) {
        this.selected = false;
      }
      this.previouslySelected = this.selected;
    },
    uncheckAll: function() {
      this.selected = false;
    }
  }
})

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val" @click="uncheck(val)">
    <label :for="val">{{ val }}</label>
  </div>
  <button @click="uncheckAll">Uncheck all</button>
</div>

＆＃13;

＆＃13; 注意：以下方法不适用于Vue 2.5或更高版本，因为单击已选择的无线电不会导致set发生。（感谢Vlad T.在评论中）< p>

接近数据的更多数据方式是根据您的选择进行计算，并让其设置者进行重新选择检查。无点击处理程序。一切都在设定价值的正常过程中处理。

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    d_selected: 'two'
  },
  computed: {
    selected: {
      get() {
        return this.d_selected;
      },
      set(v) {
        if (v === this.d_selected) {
          this.d_selected = false;
        } else {
          this.d_selected = v;
        }
      }
    }
  },
  methods: {
    uncheckAll: function() {
      this.d_selected = false;
    }
  }
})

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" name="radio" :value="val" v-model="selected" :id="val">
    <label :for="val">{{ val }}</label>
  </div>
  <button @click="uncheckAll">Uncheck all</button>
</div>

＆＃13;

Answer 2

这里不使用v-model就很简单，只使用一个变量来存储当前选择的值。

var app = new Vue({
  el: '#app',
  data: {
    list: ['one', 'two', 'three'],
    selected: 'two'
  },
  methods: {
    uncheck: function (val) {
      if (val === this.selected) {
        this.selected = false
      } else {
        this.selected = val
      }
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div v-for="(val, key) in list">
    <input type="radio" :checked="selected===val" :id="val" @click="uncheck(val)" :key="'input' + key">
    <label :for="val" :key="'label' + key">{{ val }}</label>
  </div>
</div>

Answer 3

您可以使用prevent modifier来阻止点击标签的默认行为：

<script>
    $(document).ready(function(){
        $("#drop").children().children("[href='index.html"+document.location.hash+"']").addClass('selected');
});
</script>

Here's a working Codepen.

取消选中单选按钮

3 个答案: