Eine Funktion innerhalb einer Zeichenfolge

Question

Ich schrieb einen Code wie folgt.

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>

Ich schreibe Code wie folgt. Die Funktion löst nicht aus. Gibt es eine Möglichkeit, es auszulösen? Hier ist der JSfiddle Link Js Fiddle

Answer 1

Wert für v-html wird nicht von vuejs kompiliert es nur Inhalte wie in jquery im HTML-Format angezeigt werden wir .html() verwenden, diese Dokumente prüfen: https://vuejs.org/v2/guide/syntax.html#Raw-HTML klar erwähnt, dass

als einfacher interpretiert HTML - Datenbindungen sind

ignoriert

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>

Sie müssen sich für untergeordnete Komponente für diesen Zweck ist eine schlechte Praxis

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>

Answer 2

Injizieren v-on:click='alertMe()' in html überprüfen. Nur die Standard-JavaScript-Funktion onClick="" funktioniert.

Dies liegt daran, Vue.js alle, vue Code auf Standard-HTML im Hintergrund konvertiert, so wird v-on:click=""

im Hintergrund Standard-HTML umgewandelt Man könnte so etwas wie verwenden:

<script src="https://unpkg.com/vue"></script> 

<div id="app"> 
    <p> 
    <a href="" v-on:click="alertMe"></a> 
    </p> 
</div>