VueJSのv-for内でチェックボックスとセレクトボックスを使う

以下のようなことがしたいです。

複数のユーザがおり、

一行ずつユーザを表示していきます。
１ユーザにつきチェックボックスがついており、チェックするとセレクトボックスが現れます
セレクトボックスも１ユーザごとに選択でき、年齢をセレクトできるようになっています（年齢初期値は10）
最終的にチェックがついたユーザ、その選択された年齢を配列にして取得したい

            <div v-for="user in users">

                {{ user.name }}

                <input type="checkbox" v-bind:value="user.id" v-model="status[user.id]">

                <select v-if="status[user.id]" v-model="age[user.id]" >
                    <option v-for="age in ages">
                        {{ age }}
                    </option>
                </select>
            </div>

<script>
        data: function() {
            return {
                status: [],
                age: [],
            }
        }
</script>

最終的に取得したい配列としては以下です。

{
  [
     user_id: 1
     age: 20
  ],
  [
     user_id: 3
     age: 30
  ] 
}

セレクトボックス、チェックボックスである必要はありません。現在思いつく手法がそれしかないのです。

どうぞご回答のほどよろしくお願いいたします。

euledge

2018/04/23 10:10

質問の中に書いてあることを行って、できなかった事はどのようなことでしょうか?

行動規範の内容に同意します

回答1件

状況がわからないので的外れな回答かもしれませんが、以下のような感じかと思います。
何らかの手がかりになれば良いですが...

html
1<body>
2	<div id="app">
3		<div v-for="user in users">
4
5			{{ user.name }}
6
7			<input type="checkbox" v-model="user.status">
8
9			<select v-if="user.status" v-model="user.age">
10				<option v-for="age in ages" :value="age">
11					{{ age }}
12				</option>
13			</select>
14		</div>
15
16		<button @click="showResults">確定</button>
17	</div>
18
19	<script src="//unpkg.com/vue@2.5.16/dist/vue.js"></script>
20	<script>
21		// 複数のユーザ（本来は外部から取得される？）
22		var users = [
23			{ id: 1, name: 'ユーザー1' },
24			{ id: 2, name: 'ユーザー2' },
25			{ id: 3, name: 'ユーザー3' },
26		]
27
28		new Vue({
29			el: '#app',
30			data: {
31				users: users.map(function (user) {
32					user.age = 10 // 年齢初期値は10
33					return user
34				}),
35				ages: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,]
36			},
37			methods: {
38				// 最終的にチェックがついたユーザ、その選択された年齢を配列にして取得
39				showResults() {
40					let results = []
41					this.users.forEach(function (user) {
42						if (user.status) {
43							results.push({
44								user_id: user.id,
45								age: user.age
46							})
47						}
48					})
49					console.log(results)
50				}
51			}
52		})
53	</script>
54</body>