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

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

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

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

Q&A

解決済

2回答

670閲覧

vue.jsの文字列にv-onを入れる

takahashi-one

総合スコア119

Vue.js

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

0グッド

0クリップ

投稿2022/06/23 12:09

編集2022/06/24 12:57

下記はvue.jsで文字列の中にv-on:clickをいれたものですが動作しません。
動作しない原理を教えてほしいのです。
文字列ではなく直接tableをhtmlにかけば?みたいな回答はご遠慮ください。
今回は文字列の中にv-onを入れるとなぜ動作しないかを知りたいのです。

javascript

1<!DOCTYPE html> 2<html> 3<head></head> 4<body> 5<div id="app"> 6<div v-html="table"></div> 7</div> 8<script src="https://unpkg.com/vue@next"></script> 9<script> 10const appdata = { 11 data() { 12 return { 13 table: '<table><thead><tr><th v-on:click="onclick">head</td></th></thead><tbody><tr><td>tabletest</td></tr></tbody></table>' 14 } 15 }, 16 methods:{ 17 onclick() { 18 console.log("click") 19 } 20 } 21} 22Vue.createApp(appdata).mount('#app') 23</script> 24</body> 25</html>

コードを下記のようにv-htmlではなくコンポーネントにしてみました。
上のテーブルはhtmlに直書きしたものです。下のテーブルがコンポーネントです。
直書きしたものはonclickが動作します。しかしコンポーネントにしたものは動作しません。
デバックモードでタグを見ると両方ともv-onの部分が消えています。ということはvueで読み込まれたということだと思いますがなぜ動作しないのでしょうか?

javascript

1<!DOCTYPE html> 2<html> 3<head></head> 4<body> 5<div id="app"> 6<div> 7<vontest/> 8</div> 9<div> 10<table><thead><tr><th v-on:click="onclick">head2</td></th></thead><tbody><tr><td>tabletest2</td></tr></tbody></table> 11</div> 12</div> 13<script src="https://unpkg.com/vue@next"></script> 14<script> 15const appdata = { 16 methods:{ 17 onclick() { 18 console.log("click") 19 } 20 } 21} 22 23let app = Vue.createApp(appdata) 24 25app.component('vontest', { 26 template: `<table><thead><tr><th v-on:click="onclick">head</td></th></thead><tbody><tr><td>tabletest</td></tr></tbody></table>` 27}) 28 29app.mount('#app') 30 31</script> 32</body> 33</html>

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

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

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

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

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

guest

回答2

0

ベストアンサー

コンポーネントインスタンスに紐づいたメソッドを参照してあげてください。

Vue.js

javascript

1const appdata = { 2 methods:{ 3 onclick() { 4 console.log("click") 5 } 6 } 7} 8 9let app = Vue.createApp(appdata) 10 11app.component('vontest', { 12 // ↓ 13 methods: { 14 onclick() { 15 console.log('コンポーネントのクリックイベント') 16 } 17 }, 18 // ↑ 19 template: `<table><thead><tr><th v-on:click="onclick">head</td></th></thead><tbody><tr><td>tabletest</td></tr></tbody></table>` 20})

投稿2022/06/24 02:48

Matsumon0104

総合スコア1005

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

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

takahashi-one

2022/06/24 03:57

そういうことなのですね。ありがとうございました。
guest

0

動作しない原理を教えてほしいのです。

v-htmlの内容は、単なるHTMLとして処理されます。Vue.jsとしての処理は入りません。

この内容はふつうの HTML として挿入され、Vue テンプレートとしてコンパイルされないことに注意してください(Vue.js公式

投稿2022/06/23 12:18

maisumakun

総合スコア145121

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

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

takahashi-one

2022/06/24 00:17

回答ありがとうございます。質問に追加しました。回答を参考にしてコンポーネントにしてみましたが動作しません。なぜだと思いかすか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問