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

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

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

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

JavaScript

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

Q&A

解決済

2回答

28146閲覧

Vue.jsでHTML内のテキスト・属性を参照したい

yamato_hikawa

総合スコア2092

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2016/08/25 03:24

編集2016/08/25 03:35

Vue.jsを使っているのですが、HTML内に元々あるテキストないし属性をJS側で参照だけする場合の方法が良くわかりません。

  • 属性とテキストは参照するだけ。
  • HTML上に設定されているものから書き換えたくはない。
  • JS側に設定のための数値10を記述したり、書き換わるようにはしたくない。
  • 属性値・テキスト内容が違うものを複数設置する見込み。

よろしくお願いします。

html

1<!-- sampleAttrの属性に設定されている10 または spanタグで囲まれている10を参照したい --> 2<div class="wrap"> 3 <span class="sample" sampleAttr="10">10</span> 4</div> 5 6<!-- sampleAttrの属性に設定されている200 または spanタグで囲まれている200を参照したい --> 7<div class="wrap"> 8 <span class="sample" sampleAttr="200">200</span> 9</div>

javascript

1new Vue({ 2el: '.wrap', 3 data: { 4 5 }, 6 methods: { 7 getVal: function() { 8 // ここの処理で参照できるようにしたい。 9 }, 10 } 11});

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

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

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

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

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

guest

回答2

0

ベストアンサー

追記

値はHTMLに置き不変という前提で、コンポーネント利用で書いたデモです。
プロパティvalを同期させて、コンポーネントのvalを変更すると親のvalも
変更されるようになっています。

デモ
https://jsfiddle.net/3f52z5bn/

html

1<div id="app"> 2 <sample :v=10 :val.sync=val></sample> 3 <sample :v=200 :val.sync=val></sample> 4 <button @click="getVal">val:{{val}}</button> 5</div> 6 7<script type="x/template" id="sample-template"> 8<div class="wrap"> 9 <button @click="select">{{v}}</button> 10</div> 11</script> 12

javascript

1Vue.component("sample", { 2 template: "#sample-template", 3 props: ["v", "val"], 4 data: function() { 5 return { 6 v: 0, 7 val: 0 8 }; 9 }, 10 methods: { 11 select: function() { 12 this.val = this.v; 13 } 14 } 15}); 16 17new Vue({ 18 el: "#app", 19 data: { 20 val: 0 21 }, 22 methods: { 23 getVal: function() { 24 alert(this.val); 25 } 26 } 27});

最初の回答

HTML側に記述される値は固定とのことなので、vueでバインディングしないで
素のJavaScriptで取得したほうがシンプルかもしれませんね。

javascript

1methods: { 2 getVal: function() { 3 // 例:idで取得する場合 4 var hoge = document.getElementById('hoge').getAttribute('sampleAttr'); 5 } 6}

vueの変数として利用する場合、HTML側の値と変数を結びつける
必要があるのでちょっと大げさな感じになります。

html

1<div class="wrap"> 2 <span class="sample">10</span> 3 <input type="hidden" v-model="sampleAttr[0]" value="10"> 4</div> 5 6<div class="wrap"> 7 <span class="sample">200</span> 8 <input type="hidden" v-model="sampleAttr[1]" value="200"> 9</div> 10 11<!-- sampleAttr = {0: 10, 1: 200} -->

投稿2016/08/25 11:42

編集2016/08/28 01:19
nnssn

総合スコア1221

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

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

nnssn

2016/08/26 01:49

ごめんなさい、上記回答は全体がひとつのVueインスタンスという前提で書いたものなのですが、質問文のコードを見直すと各.wrapがそれぞれ独立したインスタンスになるという想定なんですね。 ただ、vueではインスタンスと要素は基本1:1で対応するので、この記述だとひとつ目の.wrapだけがインスタンス化し、残りはスルーされてしまいます。 もし、純粋に参照用の値を持つためだけに.wrapが必要ならvueインスタンスひとつにまとめる(回答すえおき・バインドしない)、反対に.wrap自身が独立した部品として成立するならコンポーネント化が必要だと思います(回答追記します)
yamato_hikawa

2016/08/27 10:48

ありがとうございます。参考になります。 回答追記お待ちしております!
guest

0

頂いたコンポーネントのパターンを参考に、改善点はまだまだあると思いますが、ひとまず下記のような実装にしてみました。
また、コンポーネントのpropsに設定する属性名については、HTML側は大文字を使わずハイフンつなぎで、JS側はハイフンを使わずキャメルケースで書かないといけなかったという点に気づくことができました(ハイフン・大文字を使わず全て小文字だけで書けば問題はないのですが)。

やりたかった事が概ねできたので、頂いた情報を起点にドキュメントを読み進めてみようと思います。
回答ありがとうございました。

html

1<div id="app"> 2 <word-counter :max-word="100" :max-line="5" message="sample text"></word-counter> 3 <word-counter :max-word="50" :max-line="3"></word-counter> 4 <word-counter :max-word="200" :max-line="10" message="word 5break"></word-counter> 6</div> 7 8<script type="x/template" id="word-counter"> 9 <div class="counter"> 10 <textarea class="area" rows="4" cols="40" v-model="message">{{message}}</textarea> 11 <p class="count" :class="{error: isWordOver}"> 12 <span class="countNum">文字数:{{wordCount}}</span> 13 <span class="countMax">{{maxWord}}</span> 14 </p> 15 <p class="line" :class="{error: isLineOver}"> 16 <span class="countNum">行数:{{lineCount}}</span> 17 <span class="countMax">{{maxLine}}</span> 18 </p> 19 </div> 20</script>

css

1.countNum + .countMax:before { 2 content: " / "; 3} 4 5.error { 6 color: #FF0000; 7}

JavaScript

1Vue.component("word-counter", { 2 template: "#word-counter", 3 props: ["message", "maxWord", "maxLine"], 4 data: function() { 5 this.message = this.message || ''; 6 }, 7 computed: { 8 wordCount: function() { 9 return this.message.length; 10 }, 11 lineCount: function() { 12 var newLineArr = this.message.match(/\n/g) || [], 13 count = newLineArr.length + 1; 14 15 if (this.message.length === 0) { 16 count = 0; 17 } 18 19 return count; 20 }, 21 isWordOver: function(){ 22 return this.wordCount > this.maxWord; 23 }, 24 isLineOver: function() { 25 return this.lineCount > this.maxLine; 26 } 27 } 28}); 29 30new Vue({ 31 el: "#app" 32});

投稿2016/08/28 12:45

編集2016/08/28 13:41
yamato_hikawa

総合スコア2092

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問