Vue.js セレクトボックス 初期値 設定したい

Question

食べ物が選べるセレクトボックスがあります。
セレクトボックスの初期値に食べ物を選択してください。という言葉を入れたいです。

<option value="食べ物を選択してください。" selected></option> と初期値を設定したのですが画面上では文字が表示されません。 どうやったらいいでしょうか？ ご知識ある方ご教授お願いしたいです。

    <p class="create_text">
      <select v-model="selected" @change="onChange()">
        <option value="食べ物を選択してください。"></option>
        <option v-for="food in foods" :value="food"
          >{{food.name }}
        </option>
      </select>
    </p>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Food from '@/food.json'
import {Food } from '@/domain/Food'

@Component
export default class SelectBox extends Vue {
  selected: string = ''
  foods: Food[] = []

  mounted() {
    this.setFood()
  }

  setLocation() {
    this.foods=Food
  }

  onChange() {
    this.$emit('changeFood', this.selected)
  }
}
</script>

<style lang="scss" scoped>
.create {
  padding: 16px;
    &_text {
      width: 100%;
      box-sizing: border-box;
      background: white;
      option:first {
        color: #c7ced7;
      }
    }
  }
}
select {
  width: 100%;
  background: url(../selectbox.svg) no-repeat;
}
</style>

// food.json
[
  {
    "name": "卵",
    "value": {
      "id": 1,
      "best": 32,
    }
  },
  {
    "name": "ラー麺",
    "value": {
      "id": 2,
      "best": 21,
    }
  },
  {
    "name": "いちご",
    "value": {
      "id": 3,
      "best": 40,
    }
  },

Answer 1

通常のHTMLのselectと同じようにselectedやplaceholderはできなさそうです。

<template>
  <p class="create_text">
    <select v-model="selectedInfo">
      <option :value="null" disabled>食べ物を選択してください。</option>
      <option v-for="foodName in food" :key="foodName" :value="foodName">
        {{ foodName.name }}
      </option>
    </select>
  </p>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {},
  data: function() {
    return {
      selectedInfo: null
    }
  }
})
export default class App extends Vue {
  public food: any = [
    {
      name: "卵",
      value: {
        id: 1,
        best: 32
      }
    },
    {
      name: "ラー麺",
      value: {
        id: 2,
        best: 21
      }
    },
    {
      name: "いちご",
      value: {
        id: 3,
        best: 40
      }
    }
  ];
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

  data: function() {
    return {
      selectedInfo: null
    }
  }

ここで初期値の設定をしており、nullに該当するvalueのセレクト項目が表示されます。
参考に記載している一番下の内容が参考になるかもしれません。

結果

参考

コンポーネントの基本 — Vue.js
<option disabled value="">Please select one</option>
Vue.jsのselectでinitial valueをセットする - Qiita
javascript - placeholder for select in vuejs 2.0.0 - Stack Overflow

Comments

[cuku]

ありがとうございます。
Vue.jsのselectでinitial valueをセットする \- Qiitaを読んでみました。

@vue = new Vue
el: 'body'
data:
selected_item: 'item2'
上記のコードの意味がよくわかりません。
よかったら解説してほいしいです

[cuku]

onChange()などのメソッドが消されているのですがどうすすればいいのでしょうか？

[eneko0513]

new Vueの中にかかれているのはいわゆるオプションです。
elはelementのことでそこに値を設定することでVueインスタンスの適用範囲の指定ができます。
今回だとbodyタグ配下の要素にその中のdataなどを使えるようにしています。

詳しくは下記リンクにあるのでこちらご確認下さい。
https://rightcode.co.jp/blog/information-technology/vue-js-introduction-option-el-data-methods-computed-watch
selected_itemの要素名はitem2を指定しているので、当該ページのlistのitem2に合致するものが初期値として選択されるという動きです。

onChange()等は消してしまいましたが基本書き換えたのはhtmlの部分が多いはずなので
（一部jsonファイルではなく直接変数にjson入れ込んでますが）
一度ご自身で触ってみて下さい。