在vuejs文本中添加@click事件

Question

我试图添加一个点击事件的文本添加状态的描述方法如下所述。请帮我解决这个问题。

<div>
class="alert-container"
v-for="alert in alerts"
>
<div class="alert-item">
<div class="alert-info">
{{alert.sender}}
</div>
<div v-if="alert.alert_type === 'urgent'">
<div class="alert-description">{{ addMethod(alert.description) }}</div>
</div>
<div v-else class="alert-description" v-html="alert.description"></div>
</div>
</div>

<script>
export default {
methods: {
addMethod(text) {
return text + '-' + add click event to here to the description text just so when the user clicks on the event below evacuation method runs.
},
evacuation() {
console.log("Leave the building now.")
}
}
}
</script>

Answer 1

只需呈现描述文本，然后将click avent添加到包装器元素:

<div class="alert-description" @click="evacuation">{{ alert.description }} - </div>

在字符串中添加事件并使用v-html呈现它将不会被解释。

Answer 2

<div class="alert-description">{{ alert.description }} - <div class="evacuation">Click here</div></div>

这是我如何解决我的问题