1. SFITB

    Posted

    SFITB
Changes in title
+Vue.jsでselectタグの初期値にオブジェクトを設定する際の注意
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,64 @@
+# オブジェクト型(数値、文字列、論理値などプリミティブではない型)をoptionの値に設定
+
+ 以下のように、オブジェクト型を選択肢に設定して、そのデフォルト値を「v-model」で指定することができます。
+ 例の場合は、「selectedInfo」に「code=2」の値を設定しています。
+
+
+```sample.vue
+
+<template>
+ <select v-model="selectedInfo">
+ <option v-for="info in infoList" :value="info">
+ {{ info.label }}
+ </option>
+ </select>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ selectedInfo: { code: '2', label: '2番' },
+ infoList: [
+ {code: '1', label: '1番'},
+ {code: '2', label: '2番'},
+ {code: '3', label: '3番'},
+ {code: '4', label: '4番'},
+ ]
+ }
+ }
+}
+</script>
+
+````
+
+# 選択値(v-modelの値)は、プロパティや値が選択肢と完全に一致していないと選択されない
+
+ 以下の例だと、remarkプロパティがないので選択されない。
+
+```sample.vue
+
+<template>
+ <select v-model="selectedInfo">
+ <option v-for="info in infoList" :value="info">
+ {{ info.label }}
+ </option>
+ </select>
+</template>
+<script>
+export default {
+ data() {
+ return {
+ selectedInfo: { code: '2', label: '2番' },
+ infoList: [
+ {code: '1', label: '1番', remark: '' },
+ {code: '2', label: '2番', remark: '' },
+ {code: '3', label: '3番', remark: '' },
+ {code: '4', label: '4番', remark: '' },
+ ]
+ }
+ }
+}
+</script>
+
+````
+