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

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

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

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

JavaScript

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

Q&A

解決済

2回答

1238閲覧

コンポーネントのプロパティで配列の扱い

iride

総合スコア18

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2017/12/06 09:37

###前提・実現したいこと
Vue.jsのコンポーネントを使って、attributeで指定した配列の内容を
リスト表示させるものを作成しようと思っています。

propsオプションを使ってデータをコンポーネントに渡したのですが、
ただのstring型になってしまいます。
プロパティ検証も実装しているつもりですがうまく動作していません。

###問題
0. 警告も表示させずarray型(object型)ではなくstring型でnamesに格納されるのはなぜ
0. attributeで配列を指定するにはどのようにすればよいのか

###該当のソースコード

HTML

1<div id="app"> 2 <my-component names="['一郎', '次郎', '三郎']"></my-component> 3</div>

JavaScript

1Vue.component("my-component", { 2 data : function(){ 3 return { 4 citys : ["東京", "大阪", "名古屋"] 5 } 6 }, 7 props : { 8 "names" : Array, 9 }, 10 template : "\ 11 <ul> \ 12 <li v-for='item in citys'>{{ item }}</li> \ 13 </ul>", 14 created : function() { 15 console.log(typeof this.citys); 16 console.log(typeof this.names); 17 } 18}); 19 20var app = new Vue({ 21 el : "#app", 22});

###補足情報(言語/FW/ツール等のバージョンなど)
Vue.js v2.5.9
Chrome


よろしくお願いします。

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

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

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

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

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

guest

回答2

0

警告も表示させずarray型(object型)ではなくstring型でnamesに格納されるのはなぜ

jsfiddleで動かしてみたところ警告は表示されます。
fiddle

ここにあるように Production Version を使っていると Warning が表示されないので、それが原因ではないでしょうか。
Direct <script> Include - Vue

投稿2017/12/06 11:40

karamarimo

総合スコア2551

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

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

iride

2017/12/07 10:07

ご回答ありがとうございます。 ご指摘の通り、 CDNのhttps://cdn.jsdelivr.net/npm/vueを使っていたため、 Full Production Versionでした。 Full Development Versionのhttps://cdn.jsdelivr.net/npm/vue@2.5.9/dist/vue.jsにしたら、 警告が表示されていました。
guest

0

ベストアンサー

<my-component names="['一郎', '次郎', '三郎']"></my-component>

<my-component :names="['一郎', '次郎', '三郎']"></my-component>
or
<my-component v-bind:names="['一郎', '次郎', '三郎']"></my-component>

:またはv-bind:がないとただの文字列と判定されてしまいます。

警告も表示させずarray型(object型)ではなくstring型でnamesに格納されるのはなぜ

https://jp.vuejs.org/v2/guide/components.html#プロパティ検証
警告が表示されてもいいはずなのですが、なぜ警告されないかはわかりませんでした。

投稿2017/12/06 10:50

編集2017/12/06 11:25
sho_jonas

総合スコア77

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

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

iride

2017/12/07 10:06

ご回答ありがとうございます。 初心者にありがちな誤りとして書いてありましたが、 読み飛ばしておりました。 おかげさまで無事動作しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問