チェックボックスやラジオボタンでv-model
を使ってデータをバインドする場合、
v-model="radioValue" @change="changeRadio"
特に理由がない限り、上記のように@change
イベントは指定しません。
このあたりの理由はオフィシャルのドキュメント フォーム入力バインディング に詳しく載っているので読んでみてください。
仕様が『チェックボックスがチェックされたら1番目のラジオボタンをチェックする』ということであれば、watch
でcheckValue
プロパティを監視するという方法があります。
<input type="checkbox" v-model="checkValue" />
<br />
<input type="radio" id="one" value="one" v-model="radioValue" />
<label for="one">One</label>
<br />
<input type="radio" id="two" value="two" v-model="radioValue" />
<label for="two">Two</label>
<br />
<input type="radio" id="three" value="three" v-model="radioValue" />
<label for="three">three</label>
<script>
export default {
data() {
return {
checkValue: false,
radioValue: null
};
},
watch: {
checkValue(newVal, val) {
if (newVal) {
this.radioValue = "one";
}
}
}
};
</script>
どうしてもmethodsで変更したいということであれば、チェックボックスの方の@change
イベントを利用すると同様のことができると思います。
<input type="checkbox" v-model="checkValue" @change="changeRadio" />
<script>
export default {
data() {
return {
checkValue: false,
radioValue: null
};
},
methods: {
changeRadio() {
if (this.checkValue) {
this.radioValue = "one";
}
}
}
};
</script>
修正
以下のように修正しました。これでチェックボックスがonのときは1番目のラジオボタンにチェックが強制的に付くようになります。
<input type="checkbox" v-model="checkValue" />
<br />
<input
type="radio"
id="one"
value="one"
:checked="radioValue === 'one'"
@change="updatedRadio"
/>
<label for="one">One</label>
<br />
<input
type="radio"
id="two"
value="two"
:checked="radioValue === 'two'"
@change="updatedRadio"
/>
<label for="two">Two</label>
<br />
<input
type="radio"
id="three"
value="three"
:checked="radioValue === 'three'"
@change="updatedRadio"
/>
<label for="three">three</label>
<div>{{ message }}</div>
<script>
export default {
data() {
return {
checkValue: false,
radioValue: null,
message: null
};
},
methods: {
updatedRadio(e) {
this.radioValue = e.target.value;
if (this.checkValue) {
this.message = "変更できません";
this.$nextTick(function() {
this.radioValue = "one";
});
}
}
},
watch: {
checkValue(newVal, val) {
if (newVal) {
this.radioValue = "one";
} else {
this.radioValue = null;
this.message = "";
}
}
}
};
</script>
追記 (2020/05/17)
上記はasync/awaitで下記のように書き直すことができます。
methods: {
updatedRadio: async function(e) {
this.radioValue = e.target.value;
// DOM更新の完了を待つ
await this.$nextTick();
if (this.checkValue) {
this.message = "変更できません";
this.radioValue = "one";
}
}
},
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/15 09:17
2020/05/15 09:19
2020/05/15 09:23
2020/05/15 09:35
2020/05/15 15:09
2020/05/15 15:23
2020/05/16 04:54
2020/05/16 16:33