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>