Question

这是我的代码：

<template>
    <div>      
      <div v-html="data"></div> <button v-on:click="replace">Click Me to replace div contents</button>
    </div>
</template>
<script>
export default {
  data() {
    return {
      data: "I will be replaced once you click on button"
    }
  },
  methods: {
    clickMe() {
      alert("worked");
    },
    replace(){
      this.data = "Why does click me not work? It is loaded from server via ajax <a href v-on:click.prevent='clickMe'>Click Me</a>";
    }
  }
};
</script>

如果我单击Click Me to replace div contents，则替换内容，但事件处理程序clickMe不会触发。这些数据来自服务器，我需要编译这个字符串并在Vue的上下文中使用它，这样Vue就可以处理事件等。

如何从服务器下载动态字符串？我正在使用Vue 2.

Answer 1

由于v-html没有编译，你必须创建一个像这样的迷你组件来解决这个问题：

＆＃13;

new Vue({
  el: '#app',
  data () {
    return {
      data: ``
    }
  },
  
  computed: {
    compiledData () {
      return {
      	template: `<p>${this.data}</p>`
      }
    }
  },
  
  methods: {
    replace () {
       this.data = `Now click on me <a href='#' @click.prevent='alert("yo")'> here </a>`
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue@2.5.3/dist/vue.min.js"></script>


<div id="app">
  <component :is="compiledData" ></component>
  <button v-on:click="replace">Click Me to replace div contents</button>
</div>

＆＃13;

以上代码编译字符串内容，因此您可以按预期运行/执行该功能

Answer 2

使用Vue组件的其他解决方案（codepen）：

<script src="https://unpkg.com/vue"></script>
<div id="app">      
  <div id="someId"></div> <button v-on:click="replace">Click Me to replace div contents</button>
  <component :is="currentView"></component>
</div>

<script>
let app = new Vue({
  el: '#app',
  data: {
    currentView: null   
  },
  methods:{
    replace: function(){
      var templateFromServer = getTemplate();
       var comp=Vue.component('template-from-server', {
          template: templateFromServer,
          methods:{
            clickMe:function (){
              console.log("click");
            }            
          }
        });   
      this.currentView = comp;
    }   
  }
});

function getTemplate(){
  return "<a href v-on:click.prevent='clickMe'>Click Me</a>"
}
</script>

Answer 3

v-html未编译为Vue模板。来自文档：

请注意，内容以纯HTML格式插入 - 它们不会编译为Vue模板。如果您发现自己尝试使用v-html编写模板，请尝试使用组件重新考虑解决方案。

请参阅：https://vuejs.org/v2/api/#v-html

Answer 4

您无法从html字符串渲染VueJS代码。

您可以使用v-if

解决此问题

<div>
<div v-if="data">I will be replaced once you click on button</div> 
<div v-else>Why does click me not work? It is loaded from server via ajax <a href @click.prevent='clickMe'>Click Me</a></div>
<button @click="replace">Click Me to replace div contents</button>
</div>

<script>
export default {
  data() {
    return {
      data: true
    }
  },
  methods: {
    clickMe() {
      alert("worked");
    },
    replace(){
      this.data = !this.data;
    }
  }
};

您可以从字符串调用普通的javascript函数，但不能调用vuejs函数，因此onclick事件也可以。

动态插入字符串上的Vue事件处理程序不起作用

4 个答案: