Go to Qiita Advent Calendar 2024 Top
LoginSignup
RikuMoto
@RikuMoto (Riku Moto)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Vue selectのoptionタグのvalue値でapiから取得した値が一致したらselectedで表示したい

Q&A

selectOptionVue.js

仕様

Vueで開発しています。

セレクトボックスには
"株式会社"
"有限会社"
"その他"
上記のオプションタグが選択できます。

上記の画面が開くとapiを叩く仕様になっております

目的

apiからデータを取得した際、セレクトボックス内の値とデータの値が一致したらselectedが付与され
画面が開いた時には選択されている状態にしたいです。

(例1)
apiコール→"株式会社"
セレクトボックス→株式会社 selected

(例2)
apiコール→"有限会社"
セレクトボックス→有限会社 selected

(例3)
apiコール→"null" or "工業"←株式,有限会社ではない値
セレクトボックス→その他 selected

該当ソースコード

select.Vue
          <div>
            <select v-model="form.ftName" id="ft_name">
              <option
                v-for="ftName in ftNameOptions"
                :key="ftName.id"
                :value="ftName.id"
              >
                {{ ftName.name }}
              </option>
            </select>
          </div>

<script>
  data() {
    return {
      form: {
        ftName: ""
      },
      ftNameOptions: [
        { id: 0, name: "株式会社" },
        { id: 1, name: "有限会社" },
        { id: 2, name: "その他" },
      ],
    };
},
methods: {
    fetch() {
      axios.get("/api/company/" + this.$route.params.id).then((response) => {
        this.form.ftName = response.data.ftn;
      });
    },
</script>

いろいろ記事見ましたが実現できませんでした。
よろしくお願いいたします。

0

1Answer

kensoz
@kensoz

CodePen: https://codepen.io/kensoz/pen/oNyOgzO

戻り値はNumber形のidであれば、恐らくAPIリクエスト非同期の問題だと思います。
基本的にAPIリクエストはcreated hooks又はmounted hooksでやった方がいいです。
ドキュメント

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
	<div id="app">
		<div>
			<select v-model="form.ftName" id="ft_name">
				<option v-for="ftName in ftNameOptions" :key="ftName.id" :value="ftName.id">
					{{ ftName.name }}
				</option>
			</select>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				ftName: ""
			},
			ftNameOptions: [
				{ id: 0, name: "株式会社" },
				{ id: 1, name: "有限会社" },
				{ id: 2, name: "その他" }
			]
		};
	},
	methods: {
		async fetch() {
			// 本番
			// await axios.get("/api/company/" + this.$route.params.id).then((response) => {
			// 	this.form.ftName = response.data.ftn;
			// });
			
			// 例、API戻り値は2の場合（response.data.ftn = 2）：
			this.form.ftName = await 2;
		}
	},
	created() {
		this.fetch();
	}
};
</script>

戻り値は文字列の場合：

this.form.ftName = this.ftNameOptions.filter((i) => i.name === response.data.ftn)[0].id;
0Like

Your answer might help someone💌

LoginSign Up