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

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

ただいまの
回答率

90.12%

vue.jsでリストにセレクトボックスとテキストボックスを使う場合の挙動

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 438

vue.jsを利用して、セレクトボックスとテキストボックスが存在するリストを出力しています。

イメージ説明

添付のgifのように、右の初期値からテキストボックスを変更した後に、左側のセレクトボックスを変更するとテキストボックスの値が初期値に戻ってしまいます。

これは仕方がないことなのでしょうか?

selectボックスにv-modelを使ってバインドしているためかとは思いますが、
代替案などはございますでしょうか?

プログラム全文を下記に載せます。

  <div id="app">
    <div v-for="item in items">
        <select v-model="item.webs_id" name="web[]">
            <option v-for="web in webs" v-bind:value="web.id">
            {{ web.name }}
            </option>
        </select>
        <input type="text" name="name[]" v-bind:value="item.title">
    </div>
    <hr>
    <!--Title: <input v-model="addTitle"><br />-->
    <button v-on:click="add">add</button><br />
  </div>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
  <script>
    var example1 = new Vue({
      el: '#app',
      data: {
        items: [
          { title: 'memo1', webs_id: 1 },
          { title: 'memo2', webs_id: 2 }
        ],
        webs: [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo!'}
        ],
      },

      methods: {
        add: function (event) {
          this.items.push({ title: null, webs_id: 1 })
        }
      }
    })
  </script>

ご教授のほどよろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

おそらく、発生している現象にセレクトボックスは関係ありません。
その証拠に、テキスト内容を変更した後 add ボタンを押しても、やはりテキストボックスの内容は初期化されます。

ひょっとして v-bind と v-model を間違えていませんか? もしそうなら、その誤りによって発生している現象です。

より正確には、テキストボックスの value に item.title をバインドしてしまっていることが原因です。
Vue が保持している仮想 DOM 上では、1番目のテキストボックスの value プロパティは常に "memo1" に、2番目のテキストボックスの value プロパティは "memo2" になっているはずです。

テキストボックスに別の文字を入力すると、表面上 value プロパティが変わったように見えますが、テキストボックスの value プロパティは items[i].title にバインドされており、提示されたコードにはこの値を変更する処理が記述されていないため、次に Vue インスタンスがHTMLElement を更新するタイミングで画面上の値も元の memo? に戻されてしまいます。

提示いただいたコードからは質問者様がどうしたいのか酌み取れなかったので代案をお示しすることはできませんが、原因としてはこんなところです。


おそらくご質問者様は Vue の動作について(JavaScript の動作について? )複数の勘違いがあるように思います。

私がこのように感じるのは以下の点が原因です。

  • items と webs に何らかの関連を持たせる意図がありそうだが、これらを関連付けるコードが見当たらない
  • add ボタンで、items 配列に追加している値が、既に格納されている値と全くの別物 (items 配列には title や web プロパティを持ったオブジェクトが格納されているのに、突如 id プロパティのみを持ったオブジェクトを追加している。これは webs 配列に追加したい値に見える )

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/01/15 23:35

    ご指摘ありがとうございます。

    >add ボタンで、items 配列に追加している値が、既に格納されている値と全くの別物 (items 配列には title や web プロパティを持ったオブジェクトが格納されているのに、突如 id プロパティのみを持ったオブジェクトを追加している。これは webs 配列に追加したい値に見える )

    こちらについてですが、ご指摘の通りです。
    いったん事情を説明したかったので、追加時の配列の中身を適当に書いていました。上記、修正しました。

    >items と webs に何らかの関連を持たせる意図がありそうだが、これらを関連付けるコードが見当たらない

    itemsのwebs_idがwebsのidに紐づきます。websがマスタでセレクトボックスの中身です。itemsがリストのイメージです。itemsのwebs_idでwebsの初期値を設定しています。

    ちなみに

    >その証拠に、テキスト内容を変更した後 add ボタンを押しても、やはりテキストボックスの内容は初期化されます。

    こちら現象も確認済みです。
    もしこのような動作をする場合で、テキストボックスの内容が初期化されないようにしたい場合は、やvue.jsを使用しない方が良いでしょうか?

    キャンセル

  • 2019/01/15 23:38

    最初に一度だけテキストボックスの内容をitems[i].titleで初期化したうえで、以降はバインドを解除したいということでしょうか? その場合は v-once が使えそうです。

    キャンセル

  • 2019/01/15 23:50

    いえ、セレクトボックスの値を変更したときにテキストボックス側が初期化されしまうのを防ぎたいです。

    キャンセル

  • 2019/01/16 00:08 編集

    自己解決しました。
    最初のご指摘通りv-modelとv-valueの違いをよくわかっていませんでした。
    v-modelじゃないとバインドされないんですね。。。
    ありがとうございました。

    キャンセル

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

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