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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2773閲覧

getElementsByClassNameでコンポーネント内の要素のみ取得したい

mmjd

総合スコア12

Vue.js

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/09/04 05:44

編集2019/09/04 06:54

コンポーネント内のmountedでgetElementsByClassNameを呼び、子コンポーネントに値を渡す処理をしています。
このコンポーネントを複数使用するページの場合、getElementsByClassNameでページ内で一致するクラスのすべての配列が取得できてしまいますが、これをコンポーネント単位で取得し子コンポーネントに値を渡したいのですがどのようにしたらよいでしょうか?

vue

1<template> 2 <div> 3 <div> 4 <div> 5 <div v-for=""> 6 <child-component 7 class="AAA" 8 :val-a="valA" 9 /> 10 </div> 11 </div> 12 </div> 13 </div> 14</template>

vue

1mounted() { 2 const a= document.getElementsByClassName("AAA") 3 const b = <aを使っていろいろ計算した値> 4 this.valA = b 5}

・上記のコンポーネントをページで複数使う。
・AAAクラスの要素配列からいろいろ計算した値をvalAに入れて子コンポーネントに渡したい。
・AAAクラスの要素配列の取得をコンポーネントごとに行い子コンポーネントにわたす値もコンポーネントごとに行いたい。
(複雑なので関係ない要素は消したりしていますが、DOMの構成はこんな感じです。

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

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

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

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

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

kei344

2019/09/04 06:09

書かれている状況が再現するコード(HTML/JavaScript)を質問文に追記されたほうが回答を得やすいと思います。
mmjd

2019/09/04 06:47

追加しました
mmjd

2019/09/04 07:29

自己解決できそうなので、あとで追記します
guest

回答2

0

対象のDOMごとにgetElementsByClassNameを発行してみては?

投稿2019/09/04 06:08

yambejp

総合スコア114585

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

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

mmjd

2019/09/04 06:47

おっしゃることの意味は理解できるのですが、実際の実装がいまいちわからないのでもう少し詳しく教えていただきたいです。
guest

0

ベストアンサー

child-componentのDOMを見て処理してからchild-componentに値を返しているので、child-component内で全て完結する処理のように思えますが親で参照して値を返す遠回しな処理をしている理由はなにかありますか?
child-componentで自身のDOMを見て値を確定したい場合は以下のような形で解決できるかと思われますが。

child-component

vue

1<template> 2 <div ref="target> 3 <div> 4</template> 5 6<script> 7exoprt default { 8 data() { 9 return { 10 valA: null 11 } 12 } 13 mounted() { 14 const a= this.$refs.target.$el 15 const b = <aを使っていろいろ計算した値> 16 this.valA = b 17 } 18} 19</script> 20

投稿2019/09/05 05:52

nt4c

総合スコア768

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問