vuejs에서 라디오 버튼을 기본적으로 선택하도록 하는 방법?

vuejs에서 라디오 버튼을 기본적으로 선택하도록 하는 방법?

나는 프로젝트에서 VueJs를 사용하고 있는데, 페이지 로드 라디오 버튼 상태가 필요할 때 라디오 버튼 변경 후 벨로우 디브는 숨어서 보여야 한다. 나는 벨로우 코드를 쓰지만 작동하지 않는다.

html
----
<div id="demo">
  <input type="radio" value="male" v-model="male" v-bind:checked="checked" />
   <input type="radio" value="male" v-model="male" v-bind:checked="unchecked" />
</div>

javascript
---------
new Vue({
    el: '#demo',
  data: {
    checked: true
  },
methods:{
  onChange:function(){
   checked=false;
}
}
})

분명히, Vue는 바운드 값이 입력 값과 동일할 경우 입력을 확인할 것이다.

다음 주소를 확인하십시오. https://jsfiddle.net/v7zj4c13/188/

<input type="radio" name="gender" value="female" v-model="gender"/>
<input type="radio" name="gender" value="male" v-model="gender"/>

new Vue({
    el: '#demo',
    data: {
        gender: "female"
    }
})

위 코드는 남성이 아닌 여성 입력을 점검한다.

이제 우리는 두 가지 조건 중 하나를 선택해야 한다.그래서 우리는 입력 라디오 그룹을 사용해야 한다.

<b-form-radio-group v-model="gender">
    <input type="radio" value="female"/>
    <input type="radio" value="male"/>
</b-form-radio-group>

그리고 "여성" 또는 "남성"을 변수 "성별" 초기 값으로 설정할 수 있다.

data() {
    return {
        ...
        gender: 'female',
        ...
    }
}

라디오 버튼을 그룹 요소가 아닌 개별 요소로 사용하는 경우.v-model 변수는 고유해야 하며, 이와 같이 기본 선택 옵션으로 설정할 수 있다.

<input type="radio" value="female" v-model="gender"/>
<input type="radio" value="1" v-model="isOnline"/>

data() {
    return {
        ...
        gender: 'female',
        isOnline: 0,
        ...
    }
}

vue.js 모델이 스크립트 섹션의 데이터 방법에서 v-model 값을 결정하는 입력 값에 전적으로 의존하기 때문에, 당신이 html 입력값에서 남성이 두 번 나타날 때 제공한 것을 이해할 수 없는 맥락에서, 만약 당신이 남성과 여성 사이에서 전환하려는 의도가 있다면, 당신은 입력 필드 중 하나에 여성을 추가할 수 있다.또한 필요 없다v-bind:checked="checked"vue.js가 반환되는 데이터 기능에서 지정할 v-모델(성별)에서 기본 선택된 라디오 항목을 결정하므로, 다음은 입력 라디오 필드에서 변경할 수 있는 사항이다.

<div id="demo">
  <input type="radio" value="male" v-model="gender"/>
   <input type="radio" value="female" v-model="gender"  />
</div>

마지막으로 스크립트 섹션의 데이터 기능에 아래 내용을 추가하면 된다.

new Vue({
    el: '#demo',
    data: function(){
    return {
        gender: "female"
    }
}
})

상기 기능 데이터 옵션이 다음 이외의 모범 사례임

new Vue({
    el: '#demo',`enter code here`
    data: {
        gender: "female"
    }
}) 

, 구성 요소 재사용성 이유

참조URL: https://stackoverflow.com/questions/44150231/how-to-make-radio-button-checked-by-default-in-vuejs