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

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

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

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

533閲覧

vue.jsのv-forで要素数1の配列が処理出来ない

katosei

総合スコア32

Vue.js

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

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/06/24 12:26

概要

vue.jsを勉強していたのですが、取得したリストの要素数が1つだった時にリストが無かった事になってしまい?
表記がバグってしまいます。

ソース

HTML

<ul> <li v-for="o in data.list"> {{ o.name }} </li> </ul>

読み込むデータ

{ "data":{ "list":[ {"name": "aaa"}, ] } }

読み込まれた後のデータの構造(vue devtoolにて確認)

{ "data":{ "list": # listの中身が配列でなくなっている {"name": "aaa"}, } }

listの中身が複数だった場合、問題なく表示出来るのですが
一つになるとおかしくなってしまいます。

これの簡単な解決法ってありますか?

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

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

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

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

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

sousuke

2020/06/24 12:48

回答者が再現できるコードを提示してください。どうやってデータを取得しているのか、 どうやって代入しているのかなどわからないことだらけです。
ku__ra__ge

2020/06/24 14:51

v-for="o in data.list" が気になるんですが v-for="o in list" の間違いじゃないですか? 普通vue.jsのディレクティブでvueオブジェクトのデータを参照するときにdata.xxxxという書き方は不要だと思います。
katosei

2020/06/25 04:05

再現出来るコードを作ろうと最小構成で書いた結果、原因がわかりました。 利用しているモジュール(x2js)がxmlを変数に置き換える時、 同じ値が複数あればlist、なければobjectとして処理しているようでした。 上記のソース自体は問題なく動作するもののようです。 結局自分の調査力不足でした。 失礼しました&ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問