从字符串中渲染v-html中的vuejs bindes

Question

我根据api呼叫响应生成这个html for chatbubble。 html被添加到本地var。它通过在组件模板中使用<div v-html="messages">/<div>来显示。

这仅在我添加html后调用this.$forceUpdate();时才有效。

问题：有一个按钮

'<a v-on:click="askdialogflow" >'+classes["first"]+'</a>'

当它直接添加到模板时，它可以工作并呈现。当它从字符串渲染时，它不会转换它。

问题：v-html不呈现/编译按钮

硬编码电话：

this.Questionclasses({first: "10010300", second: "02170705", third: "03070403", fourth: "18110000"});

代码：

<template>
  <div class='chat-wrapper' id="chat-wrapper">

<div v-html = "messages" ></div>

  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: 'App',
    data: {
      messages:"",
      imageData: ""  // we will store base64 format of image in this string
    },
    methods: {
      checkImage() {
        this.imageData =localStorage["image"]
        axios.post('http://localhost:5000/api/start',{img:localStorage["image"].split(",")[1]})
          .then(response =>{
            this.Questionclasses(JSON.parse(response.data));
          })
          .catch(e => {
            this.errors.push(e)
          })
      },
      startBlock(){
        let html = `   <div class='chat-message chat-message-sender'>
      <img class='chat-image chat-image-default' src='./../../static/user.jpg' />
      <div class='chat-message-wrapper'>
        <div class='chat-message-content'>
          <img  class="startImage" src="` + this.imageData +`">
          <p>Analyseer deze foto alstublieft.</p>
        </div>
        <div class='chat-details'>
          <span class='chat-message-localisation font-size-small'>Time</span>
        </div>
      </div>
    </div>`
        this.messages = html;
      },
      Questionclasses(classes){
        let html =`  <div class='chat-message padding'>
      <div class='chat-message chat-message-recipient'>
        <img class='chat-image chat-image-default' src='./../../static/tvh_robot-pro.png' />
        <div class='chat-message-wrapper'>
          <div class='chat-message-content'>
            <div class="classImage-wrapper">
              <div>
                <p>
                  <img src="./../../static/kip.jpg" class="classImage">
                </p>
                <p> <a v-on:click="askdialogflow" >`+classes["first"]+`</a> </p>
              </div>

              <div>
                <p>
                  <img src="./../../static/kip.jpg" class="classImage">
                </p>
                <p><a>`+classes["second"]+`</a></p>
              </div>


              <div>
                <p>
                  <img src="./../../static/kip.jpg" class="classImage">
                </p>
                <p><a>`+classes["third"]+`</a> </p>
              </div>
              <div>
                <p>
                  <img src="./../../static/kip.jpg" class="classImage">
                </p>
                <p><a>`+classes["fourth"]+`</a> </p>
              </div>
            </div>
            <p><a href="start">geen van bovenstaande</a></p>

          </div>
          <div class='chat-details'>
            <span class='chat-message-localization font-size-small'>Time</span>
          </div>
        </div>
      </div>

    </div>
        `
        console.log(html)
        this.messages += html;
        this.$forceUpdate();
      },
      askdialogflow(event){
        console.log(event)
      }
    },
      beforeMount(){
        this.checkImage();
        this.startBlock();
      },
  }
</script>