コンテナ内のテキストノードやhtmlをパラメータにする使い方


#1

もともとHTMLにかかれている内容をもとに、vueで作用させて出力する処理ってどう書いたらいいでしょうか?ポイントなのはコンテナ内のノードにデーターが含まれているというところです。JavaScriptが無効だったり検索ロボットに拾ってもらうための工夫ですね。

イメージとして最も多く使われるであろうものは、シンタックスハイライトです。例えばpreタグにコードが書かれていたとして、それをvueのコンテナでくくってシンタックスハイライトさせて表示するような場合どのようにコーディングしたらいいでしょうか?

<sh>
    <pre>
        const code = document.querySelector('sh pre').textContent;
     </pre>
 </sh>

あるいは、

 <pre v-model="sh">
        const code = document.querySelector('sh pre').textContent;
 </pre>

(別件でテキストエリアにツールバーをつける処理を書こうとしたときにv-modelを使うとどういうわけか動かなかったので)

このときに、preタグ内に含まれるconst code = document.querySelector('sh pre').textContent;というテキストをvueのパラメータとして渡したいのです。

独自属性などを使ってvueにわたす例は多いのですが、テキストノードやinnerHTMLを渡す方法がわかりません。


#2

自分の同じ問題かもしれないので・・・

貼っときます。


#3

うーん。
console.logで取得させたときは一応値はでたのですが、undefinedになってしまいました。

仕方がないので、

console.log(this.$attrs, this.$children, this.$el, this.$refs, this.$slots, this.$vnode);

で虱潰しに探したところ、$slots内にそれっぽい箇所があったので

this.$slots.default[0].children[0].text

で取得させることにしました。おそらく、this.$slots.default[0]は固定ですね。