javascript - 如果与v-for一起使用，则无法设置默认输入单选框

我正在尝试在代码中添加单选按钮。除了一件事，一切都正常。当我使用v-for循环创建收音机时，未检查默认收音机。如果我将它放在for循环之外，它将起作用。

我已经试过了：-


  ：checked =“ index == 1”


这（如一些答案中所建议）：


  ：checked =“ {index == 1}”


但是他们都没有为我工作。

以下是我的模板代码段：-

<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(){

    }
});

}

任何帮助将非常感激。

最佳答案

您无需自己设置checked属性。通过使用v-model="selectedShape"，您已将所有单选输入与selectedShape链接。

您已经可以通过控制selectedShape的值来控制选中的属性。

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

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

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