質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.84%

  • Vue.js

    524questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

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

受付中

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 125
退会済みユーザー

退会済みユーザー

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

複数のユーザがおり、

  1. 一行ずつユーザを表示していきます。
  2. 1ユーザにつきチェックボックスがついており、チェックするとセレクトボックスが現れます
  3. セレクトボックスも1ユーザごとに選択でき、年齢をセレクトできるようになっています(年齢初期値は10)
  4. 最終的にチェックがついたユーザ、その選択された年齢を配列にして取得したい
            <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
  ] 
}

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • euledge

    2018/04/23 19:10

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

    キャンセル

回答 1

+2

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

<body>
    <div id="app">
        <div v-for="user in users">

            {{ user.name }}

            <input type="checkbox" v-model="user.status">

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

        <button @click="showResults">確定</button>
    </div>

    <script src="//unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script>
        // 複数のユーザ(本来は外部から取得される?)
        var users = [
            { id: 1, name: 'ユーザー1' },
            { id: 2, name: 'ユーザー2' },
            { id: 3, name: 'ユーザー3' },
        ]

        new Vue({
            el: '#app',
            data: {
                users: users.map(function (user) {
                    user.age = 10 // 年齢初期値は10
                    return user
                }),
                ages: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,]
            },
            methods: {
                // 最終的にチェックがついたユーザ、その選択された年齢を配列にして取得
                showResults() {
                    let results = []
                    this.users.forEach(function (user) {
                        if (user.status) {
                            results.push({
                                user_id: user.id,
                                age: user.age
                            })
                        }
                    })
                    console.log(results)
                }
            }
        })
    </script>
</body>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Vue.js

    524questions

    Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。