Question

我正在尝试向我的代码添加单选按钮。除了一件事，一切都很好。当我使用v-for循环创建无线电时，默认无线电不会被检查。如果我将它放在for循环之外，它就可以工作。

我试过这个： -

：checked =＆＃34; index == 1＆＃34;

和（如某些答案所示）： -

：checked =＆＃34; {index == 1}＆＃34;

但他们都没有为我工作。

以下是我的模板摘要： -

<div class="props-data">
  <!-- <input type="radio" :checked="currentStep==1"> -->
  <span v-for="(shape, index) in availableShapes" v-if="currentStep==1">
    <div>
      <input type="radio" :id="shape" :value="shape" v-model="selectedShape" :checked="index == 1">
      <label :for="shape">{{shape}}</label>
    </div>
  </span>
</div>

注意： - steps-container 是创建Vue实例的主要父类。

以下是我的js代码： -

window.onload = function(){
new Vue({
    el: '#steps-container',
    data: function() {
        return {
            currentStep: 1,
            availableShapes: ['Rectangle','Circle','Square','Ellipse'],
            selectedShape: undefined
        };
    },
    methods: {
        cancel: function(){
            this.currentStep = 1;
            jQuery('#main-action').text('Go to step '+ (this.currentStep+1));
        },
        nextStep: function(){
            if( this.currentStep == 2 ){
                jQuery('#main-action').text('Startover');
                this.currentStep++;
            }
            else{
                if( this.currentStep == 3 ){
                    this.currentStep = 1;
                }
                else{
                    this.currentStep++;
                }
                jQuery('#main-action').text('Go to step '+ (this.currentStep+1));
            }
        }
    },
    mounted: function(){
    },
    updated: function(){

    }
});

}

非常感谢任何帮助。

Answer 1

您不需要自己设置checked attr。使用v-model="selectedShape"，您已将所有无线电输入与selectedShape相关联。

您已经可以通过控制selectedShape的值来控制已检查的attr。

因此，将selectedShape的初始值设置为默认值，默认情况下会进行检查。

<input type="radio" :id="shape" :value="shape" v-model="selectedShape">（删除:checked="index == 1"）

    data: function() {
        return {
            //...
            selectedShape: "THE DEFAULT VALUE"
        };
    },

如果与v-for一起使用，则无法设置默认输入无线电选中

1 个答案: