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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

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

Q&A

解決済

2回答

5391閲覧

Vuejsによるv-forとv-ifによるDOM操作について

Cziffra

総合スコア10

Vue.js

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

0グッド

0クリップ

投稿2017/02/25 08:14

編集2017/02/26 06:37

Vue.js v2.1.10 環境です。

下記の条件を満たすフロントの実装を行いたくコーディングを行いました。

  1. fromsはセレクトボックスの選択肢が格納される
  2. savedは保存した値が格納されており初期表示に一致するチェックボックスが選択済みで表示される
  3. +クリック時fromsのセレクトボックスが追加される
  4. listCountはセレクトボックスの追加操作で利用することを前提としており、画面初期表示時はsaved.lengthの値と同値

しかしながら下記のコーディングではsavedに値が入っていると3が動作しません。
ちなみにv-ifの "saved[key].from == from.name" を 削除するとsavedに値が入っていないと3が動作しなくなってしまいます。

listCountのインクリメントとkeyの部分が駄目なような気がしているのですが、回避できませんでした。
上記の4つの条件を同時に満たす方法をご教示頂ければ幸いです。

html

1<ul id=list> 2 <li v-for="(n,key) in listCount"> 3 <select> 4 <option selected v-for="from in froms" v-if="saved.length >= 1 && saved[key].from == from.name">{{from.name}}</option> 5 <option v-else>{{from.name}}</option> 6 </select> 7 </li> 8 <li> 9 <input type="button" value="+" @click="listCount += 1"> 10 </li> 11</ul>

javascript

1const list = new Vue({ 2 el: '#list', 3 data: { 4 froms: [{"name":"AAA"},{"name":"BBB"},{"name":"CCC"},{"name":"DDD"}], 5 saved: [{"from":"BBB"},{"from":"CCC"}], 6 listCount: 2 7 } 8});

BAを転記します。

html

1<ul id=list> 2 <li v-for="(sv, i) in saved"> 3 <select v-model="saved[i]"> 4 <option v-for="from in froms">{{from}}</option> 5 </select> 6 </li> 7 <li> 8 <input type="button" value="+" @click="addNewSaved"> 9 </li> 10</ul>

javascript

1const list = new Vue({ 2 el: '#list', 3 data: { 4 froms: ["AAA", "BBB", "CCC", "DDD"], 5 saved: ["BBB","CCC"] 6 }, 7 methods: { 8 addNewSaved: function () { 9 this.saved.push(this.froms[0]); 10 } 11 } 12});

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ちょっとコードが変わってしまっていますが、とりあえず要望に沿うような動作をするものを組んでみました
サンプル

投稿2017/02/25 12:18

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cziffra

2017/02/25 13:53

ご回答ありがとうございます。methodでpushする部分とv-modelで配列を指定する部分、とても参考になりました。 しかし"選択してください"が不要(初期値はfromの最初の値とする)です。 条件が漏れており申し訳ございません。 こうなるとなかなか難しいですね。
turbgraphics200

2017/02/25 19:08

ならこれでいいんじゃ? (サンプル更新)
Cziffra

2017/02/26 06:35

ありがとうございます!
guest

0

たぶん
v-for="(n,key) in listCount"
のところは
listCountはNumber型なので
v-for="n in listCount"
とすべきでは?(なのでsaved[key]ではなくsaved[n]に変更)

投稿2017/02/25 08:29

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cziffra

2017/02/25 08:49

ご回答ありがとうございます。 ご指摘の変更を加えるとセレクトボックスの選択肢が{{from.name}}のまま表示されてしまい解決いたしませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問