以下のようなコードを書きました。文字列内の関数
new Vue({
el: '#app',
data: {
message: "<a href='#' v-on:click='alertMe()'>alert me </a>"
},
methods:{
\t alertMe() {
console.log('fired')
}
}
})<script src="https://unpkg.com/vue"></script>
<div id="app">
<p v-html="message"></p>
</div>私はこのようなコードを記述します。この機能は起動していません。それを引き起こす方法はありますか？ここで v-htmlためJs Fiddle
値がvuejsでコンパイルされていないJSfiddleリンクでのjQueryで私たちが.html()を使用するようにそれはちょうどこのドキュメントをチェックし、HTML形式のコンテンツを表示：https://vuejs.org/v2/guide/syntax.html#Raw-HTMLが明らかに平野として解釈
と述べましたHTML - データバインディングが無視され
new Vue({
el: '#app',
data: {
message: "<a href='#' onclick='alert(11)' v-on:click='alertMe()'>alert me </a>"
},
methods:{
\t alertMe() {
console.log('fired')
}
}
});<script src="https://unpkg.com/vue"></script>
<div id="app">
<p v-html="message"></p>
</div>v-on:click='alertMe()'を注入する。この目的
var child = Vue.extend({
template: "<div>Child Component : <a href='#' v-on:click='alertMe'>Alert</a></div>",
methods:{
alertMe: function(){
console.log("Child alertMe");
this.$parent.alertMe();
}
}
});
var app = new Vue({
el: "#vue-instance",
data: {
},
mounted() {
},
components: {
child
},
methods:{
alertMe: function(){
console.log("Parent alertMe");
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.1/vue.js"></script>
<div id="vue-instance">
<child></child>
</div>の子コンポーネントをチェックする必要がある
は悪い習慣です。標準のjavascript関数onClick=""のみが動作します。
Vue.jsはそうv-on:click=""はあなたが好きなものを使用でき、背景
に標準HTMLに変換され、バックグラウンドでの標準的なHTMLにすべてVUEコードを変換するのでこれがある：これは「でき
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>
<a href="" v-on:click="alertMe"></a>
</p>
</div>
をtは行われる – bert
@bertなぜあなたは彼がなぜそれが行えないのかを説明していないのですか？ – Jackowski
フェア！それは私の役に立たないが、私は実際に答えを知らない。私はそれが不可能であることを知っています。おそらく、コンパイル時に関数呼び出しとして解析されないので、 – bert