VueJS根据点击列表条目的索引以模态显示信息

Question

我是vueJS的新手，不知道如何继续。

我有一个包含名称和工作位置的对象数组。这些对象显示为带按钮的列表。当用户单击该按钮时，会弹出一个模式，显示单击的人员姓名及其工作。

如何让模态显示正确的信息？

<div id="modal">
  <h2 class="membername">Name: {{ members[0].name }}</h2>
  <p class="memberposition">Position: {{ members[0].position}}</p>
</div>

＆＃39; [0]＆＃39;在vuejs括号中应该是用户点击的任何人的索引。

http://codepen.io/leetzorr/pen/QGJozR

Answer 1

创建一个selectedMember字段并让它保存ID。然后将模态基于它并仅更改selectedMember - 字段。我已更新您的笔：http://codepen.io/anon/pen/KNrYvz