Question

我写了一些代码如下。

<textarea class="form-control" id="title" maxlength="10" 
name="title" [(ngModel)]="titleModel"></textarea> 
<span style="color:red" *ngIf="titleModel?.length > 10">
      10 max
</span>

new Vue({
  el: '#app',
  data: {
      message: "<a href='#' v-on:click='alertMe()'>alert me </a>"
  },
  methods:{
  	 alertMe() {
        console.log('fired')
      }
  }
  
})

我写这样的代码。该功能未触发。有没有办法触发它。这是JSfiddle链接Js Fiddle

Answer 1

v-html的值不是由vuejs编译的，它只是以html格式显示内容，就像我们使用.html()的jquery一样，检查这个文档：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:{
  	 alertMe() {
        console.log('fired')
      }
  }
  
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p v-html="message"></p>
</div>

您需要为此目的检查子组件

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

在html中注入v-on:click='alertMe()'是不好的做法。只有标准的javascript函数onClick=""才有效。

这是因为Vue.js会在后台将所有vue代码转换为标准HTML，因此v-on:click=""会在后台转换为标准html

您可以使用以下内容：

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

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

字符串中的函数

2 个答案: