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

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

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

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

JavaScript

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

Q&A

解決済

1回答

404閲覧

v-forにて多重配列の値を別々に出力する方法

yuriyuri1477

総合スコア13

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2018/09/19 01:58

編集2018/09/19 03:16

前提・実現したいこと

vue,jsを勉強中です。
axiosで以下のような二次配列を取得しました。

[["佐藤","@sato"],["中山","@nakayama"],["福田","@fukuda"],]

これらの値をv-forにて別々に吐き出したいのですが、
その方法がよくわかりません。
理想としては

<input type="checkbox" id="mention" class="sec_staffSelect--chkBox" name="color">' + <span class="sec_staffSelect--staffNam" v-text="name" ></span>' +

上記のように別々のタグに値を入れたいです

該当のソースコード

window.onload = function () { new Vue({ el: '#names', data: { info: { name: [], mention: [] } }, template: '<ul class="sec_staffSelect--staffUi" >' + ' <li class="sec_staffSelect--staffli" v-for="name in names">' + ' <label class="sec_staffSelect--staffLabel">' + ' <input type="checkbox" class="sec_staffSelect--chkBox" name="color">' + ' <span class="sec_staffSelect--staffNam" v-text="name" ></span>' + ' </label>' + ' </li>' + '</ul>', created: function () { const self = this return axios.get('url') .then(response => { self.info = response.data for (let i = 0, len = self.info.length; i < len; ++i) { console.log(self.info[i][0]) this.names.push(self.info[i][0]) } }).catch(err => { console.log('err:', err) }) } }) }

試したこと

cratedの部分でpushをして配列に値を加える。

よろしくお願いします

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/09/19 02:26

ソースコードはインデントをして回答者にわかりやすいようにしてください。お願いします。
yuriyuri1477

2018/09/19 02:37

インデントの部分、修正いたしました。確認不足で申し訳ありません
退会済みユーザー

退会済みユーザー

2018/09/19 02:45

ありがとうございます。console.logが出力しているのは佐藤、中山、福田 でしょうか。
yuriyuri1477

2018/09/19 03:04

はい、consoleで出力させてるのは名前の方です
guest

回答1

0

ベストアンサー

まずこのコードがうまくいかない理由として、

JS

1self.info = response.data;

をしたことによって、あなたが想定しているinfoの構造が

JS

1{ 2 name: [], 3 mention: [] 4}

ではなくなってしまっています。ですので、上記代入文は削除して、

JS

1for (let i = 0, len = response.data; i < len; ++i) { 2 console.log(self.info[i][0]) 3 this.info.name.push(response.data[i][0]) 4 this.info.mention.push(response.data[i][1]) 5}

としたらいかがでしょうか。

投稿2018/09/19 02:43

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問