LoginSignup
0

More than 1 year has passed since last update.

#Vue の v-for で form select option の 簡単なHTMLフォーム作る ( key value の配列を展開する )

Last updated at Posted at 2020-04-30
<!-- https://vuejs.org/v2/guide/list.html -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>

  <div id="example">
    <form action="./">
      <select name="param">
        <option v-for="(value, key) in selectableItems" :value="value">
          {{ key }}
        </option>
        <input type="submit">
      </select>
    </form>
  </div>

  <script>
    new Vue({
      el: '#example',
      data: {
        selectableItems: {
          foo: "foo-value",
          bar: "bar-value"
        }
      }
    })
  </script>
</body>

image

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0