JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="main-container">
<div id="contact-table">
<table>
<thead>
<tr>
<th>Contact Name</th>
<th>Email</th>
</tr>
</thead>
<tbody v-for="(contact, index) in contacts">
<tr v-on:click="selectContact(index)">
<td>
{{contact.name}}
</td>
<td>
{{contact.email}}
</td>
</tr>
</tbody>
</table>
</div>
<div id="contact-form">
<input type="text" v-model="contactName"/>
<input type="text" v-model="contactEmail"/>
<button type="button" v-on:click="updateContact">Update Contact</button>
</div>
</div>
</body>
<script>
var hub = {
contacts: [
{
name: "James",
email: "[email protected]",
index: 0
},
{
name: "Mary",
email: "[email protected]",
index: 1
}
],
index: 0
};
var bus = new Vue()
var contactTable = new Vue({
el: "#contact-table",
data: {
contacts: hub.contacts
},
methods: {
selectContact: function(index) {
hub.index = index;
console.log(hub.index);
bus.$emit('updateIndex', index)
}
}
});
var contactForm = new Vue({
...