Vuejs2 从字符串以v-html格式呈现vuejs绑定

根据api调用响应，我将此html用于聊天泡泡。html被添加到本地变量。它通过在组件模板中使用

/

来显示

这仅在我调用

this.$forceUpdate（）时有效

问题：有一个按钮

'

时间
`
console.log（html）
this.messages+=html；
这是.$forceUpdate（）；
},
askdialogflow（事件）{
console.log（事件）
}
},
beforeMount（）{
这是checkImage（）；
这个.startBlock（）；
},
}
@JacobGohedited@JacobGoh格式问题，MB无法将事件侦听器绑定到使用v-html创建的元素。这个类似的问题可能对你有用。你能展示你的实际代码吗？@Max添加了左样式块，因为它与问题无关
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>