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;
Like!