Vue.jsのdirectiveのinnerHTMLでmustache式（{{}}）がうまく展開されない

lang
1	Vue.directive('test-directive', {
2		bind: function () {
3			this.el.innerHTML = "str:" + this.el.innerHTML;
4		}
5	});
6	
7	var vm = new Vue({
8		el: '#app',
9		data: {
10			str: "Hello World!"
11		}
12	});

lang
1<div v-test-directive>{{str}}(this is literal)</div>

上記コードを書いたのですが、
私の理想では、
str: Hello World!(this is literal)
となってほしいのですが、現実は、
str: (this is literal)
となってしまいます。

lang
1	Vue.directive('test-directive', {
2		bind: function () {
3			//this.el.innerHTML = "str:" + this.el.innerHTML; #この行をコメントアウト
4		}
5	});

上記のようにコメントアウトして、bind内でinnerHTMLを操作しないようにした場合は、
Hello World!(this is literal)
とmustacheはきちんと展開されます。
（console.logで内容を見ると、innerHTMLとして取得する文字列に{{}}が入ってませんでした。その不完全な文字列でinnerHTMLを上書きするために{{}}が消えてしまうようです）

なんとかbindでinnerHTMLの内容を操作しつつ、
{{}}を展開できないでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

ディレクティブの処理順の問題の様です。

mustache式は内部的にはv-textなどのディレクティブを用いて実現されているようなので、
priorityを通常のディレクティブに指定される1000より小さい999以下にすると、
v-textなどの他のディレクティブの処理が先に実施され、結果としてやりたいことができる様です。
(こちらではこれでできました。)

	Vue.directive('test-directive', {
		priority: 999,
        bind: function () {
            this.el.innerHTML = "str:" + this.el.innerHTML;
        }
    });

投稿2016/03/30 09:51

eripong

総合スコア1546

shichiria

2016/03/30 10:57

行けました！プライオリティの話も勉強になりました、ありがとうございます。

行動規範の内容に同意します

    var vm = new Vue({
        el: '#app',

id属性「app」を指定してるのに、

<div v-test-directive>{{str}}(this is literal)</div>

こっちで「id="app"」が抜けてるから展開できないのです。

投稿2016/03/30 06:37

tkturbo

総合スコア5572

shichiria

2016/03/30 09:03

いえ、appはvueの親オブジェクトに設定されているもので、 bodyに書かれています。（body全体がvueの展開対象）詳しく書くと下記のような構造になっています。 <body id="app"> ・・・（省略） <div v-test-directive>{{str}}(this is literal)</div> ・・・（省略） </body>

tkturbo

2016/03/30 09:08

では、 var vm = new Vue({ el : '#app2' // 以下略とした上で、 <div id='app2' v-test-directive>{{str}} としてみてください。これで出るはずです。少なくとも質問文の最初のjavascriptで記述されている「this.el.innerHTML」ではbody全体の内容は取得できません。

shichiria

2016/03/30 10:58

回答ありがとうございました。

行動規範の内容に同意します

あなたの回答