Vue Js在模板中渲染动态信息

【问题标题】：Vue Js render dynamic information in templateVue Js在模板中渲染动态信息
【发布时间】：2017-04-13 09:00:24
【问题描述】：

当用户单击链接时，我试图在弹出窗口中填充用户 ID，并且我获取信息表单数据属性并将其传递给对象以在每次用户单击链接时显示不同的 ID。但是如果我第一次点击，我会得到相同的结果。

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

JS 代码

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

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

});

【问题讨论】：

你的问题是什么？

标签： vue.js vue-component

【解决方案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>

【讨论】：