Vue Js在模板中呈现动态信息

Question

我想在用户点击链接时弹出用户标识，并且我获取信息表单数据属性并将其传递给对象，以便每次用户单击链接时都显示不同的标识。但是，如果我第一次点击，我会得到同样的结果。

下面的代码是JQuery和Vue混合。

JS代码

$('.lead-details-btn').on('click', function(){ 

new Vue({ 
    el: "#app", 
    data() { 
     return { 
      message: $(this).data('id') 
     } 
    } 
}); 

}); 

Answer 1

尝试：

vm = new Vue({ 
 
    el: "#app", 
 
    data() { 
 
    return { 
 
     message: '' 
 
    } 
 
    } 
 
}); 
 

 
$('.lead-details-btn').on('click', function() { 
 
    console.log($(this).attr('id')) 
 
    vm.message = $(this).attr('id'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script> 
 

 
<div id="app"> 
 
    {{ message }} 
 
    <button id="btn-1" class="lead-details-btn">btn-1</button> 
 
    <button id="btn-2" class="lead-details-btn">btn-2</button> 
 
    <button id="btn-3" class="lead-details-btn">btn-3</button> 
 
</div>