v-for内のcheckboxでv-modalを使う場合

Question

checkboxでtrue,falseを取得したく、以下のような記述をすると実現したいとおりの挙動になります。

<div id='app'>
	<ul>
		<li>
			<input type="checkbox" id="boxA" v-model="object.hoge">
			<label for="boxA">hoge</label>
		</li>
		<li>
			<input type="checkbox" id="boxB" v-model="object.fuga">
			<label for="boxB">fuga</label>
		</li>
	</ul>
	<ul>
		<li v-for="(value, name) in object">{{ name }} : {{ value }}</li>
	</ul>
</div>

new Vue({
  el: '#app',
  data: {
	object: {
		hoge: false,
		fuga: false
	}
  }
})

ですが、inputもv-forで記述させようと思い、html側を以下のように変更すると、checkしてもtrue,falseが変更されません。

<div id='app'>
	<ul>
		<li v-for="(value, name) in object">
			<input type="checkbox" :id="name" v-model="name">
			<label :for="name">{{ name }}</label>
		</li>
	</ul>
	<ul>
		<li v-for="(value, name) in object">{{ name }} : {{ value }}</li>
	</ul>
</div>

v-modalを使う場合は単体のcheckboxでないとならないのでしょうか？？

Answer 1

v-modelに記述する項目が誤っています。

<input type="checkbox" :id="name" v-model="name">

以下のように変更すれば意図した挙動が実現できるかと思います。

<input type="checkbox" :id="name" v-model="object[name]">

Comments

[bfk]

ありがとうございます！拙い質問にご回答いただきありがとうございます！
可能であれば後学の為に伺いたいのですが、なぜobject[name]で動作したのでしょうか？？
この場合、書くとしたらobject.nameかな？と考えており、全く頭になかった書き方だったもので…

[kozy4324]

v-for内のvalueとnameはJavaScriptでいうローカル変数のようなものですので、object.hoge と等価なのは、object["hoge"] となります。object.name ですと、objectの "name" というプロパティにアクセスすることになりますよ。

[bfk]

理解しました！ありがとうございます！！