質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

428閲覧

連想配列の値をinput type="select"属性に選択肢として登録したい

snafkin999

総合スコア27

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2023/03/19 23:47

実現したいこと

  • 連想配列の値をinput type="select"属性に選択肢として登録したい

前提

Vue2,nuxt.jsでフォームを作成しています
動的に選択肢が入れ替わるようにしたい

発生している問題・エラーメッセージ

Object.entriesにてkeyとvalueにそれぞれ登録しようとしましたが
Object.entries自体が動いていないように思います

Cannot convert undefined or null to object

該当のソースコード

vue.js

1<template> 2// ここで選んだ選択肢によって次の選択肢を入れ替えたい 3<Input 4 v-model="nums" 5 input-type="select" 6 :options="[0,1,2]" 7/> 8 9// ここの選択肢を動的にしたいです 10<Input 11 input-type="select" 12 :options="setSelect(object1[nums])" 13/> 14 15</template> 16//このオブジェクトをselectの選択肢に追加したい 17const object1 = 18[{"aa":"値1","bb":"値2","cc":"値3","dd":"値4","ee":"値5"}], 19[{"aa":"値1","bb":"値2","cc":"値3","dd":"値4","ee":"値5"}], 20[{"aa":"値1","bb":"値2","cc":"値3","dd":"値4","ee":"値5"}] 21 22 23methods(){ 24 setSelect(object1){ 25 for (const [key, value] of Object.entries(object1)) { 26 console.log(`${key}: ${value}`); 27 } 28 } 29}

試したこと

下記で選択肢に入れようともしましたが
Cannot read properties of undefined(reading 'map')と表示されエラーになってしまいます

vue.js

1setSelect(object1){ 2 const array = object1.map((d,idx) => { 3 return { 4 key:idx, 5 value:d.value, 6 } 7 }) 8}

補足情報(FW/ツールのバージョンなど)

vue2 nuxt2.6.1を使用

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

これで解決しました

setSelect(object1){ return Object.enries(object1).map(([key,value])=>{ return {value : key,label:value}})} }

投稿2023/03/20 08:41

snafkin999

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問