Using component area to show various content - vue.js

Question

I have a relatively simple task although I am just a beginner so it's difficult to proceed.
I have a list of users on the left and a right panel to show that users info. The information about the user has an edit button that I want to take over that right panel and then save will return back to the user details.
What is the best approach to go about this?
Should the 2 pages be different components or should I just use javascript to show and hide content? Is there a better approach then either of those?
Sorry I'm new and just trying to get my had around the concept.
Thanks

Answer 1

I wrote a simple example for you:
const data = [{
id: 1,
name: 'user1',
age: 21
},{
id: 2,
name: 'user2',
age: 33
}]
const mixin = {
props: {
userId: {
required: true
}
},
data () {
return {
user: {}
}
},
methods: {
loadUser () {
/*ajax to get user detail data here*/
setTimeout(_=>{
this.user = data.filter(o=>o.id==this.userId)[0]
},10)
}
},
created () {
this.loadUser()
},
watch: {
userId (newVal) {
if(newVal){
this.loadUser()
}
}
}
}
Vue.component('user-viewer',{
template: `<div>
name:{{user.name}}<br>
age: {{user.age}}<br>
<button #click="edit">edit</button>
</div>`,
mixins: [mixin],
methods: {
edit () {
this.$emit('switch-edit-mode',true)
}
}
});
Vue.component('user-editor',{
template: `<div>
name:<input type="text" v-model="user.name"><br>
age: <input type="text" v-model="user.age"><br>
<button #click="sendData">save</button>
</div>`,
mixins: [mixin],
methods: {
sendData () {
/*ajax send user data here*/
setTimeout(_=>{
/*false means edit complete,so that user list must be reloaded*/
this.$emit('switch-edit-mode',false);
},10)
}
}
});
var app = new Vue({
el: '#app',
data () {
return {
users: [],
isModify: false,
userId: null
}
},
methods: {
toggleModify (modify) {
this.isModify = modify
if(!modify){
this.fetchUsers();
}
},
fetchUsers () {
/*load your user list data here*/
this.users = data.map(o=>({
id: o.id,
name: o.name
}))
}
},
created () {
this.fetchUsers()
}
})
*{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
.main{
display: flex;
}
.user-list{
width: 250px;
}
.user-list>li{
border:1px solid skyblue;
border-bottom: none;
}
.user-list>li:last-child{
border-bottom:1px solid skyblue;
}
.content-wrapper{
flex:1;
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<style>
*{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
.main{
display: flex;
}
.user-list{
width: 250px;
}
.user-list>li{
border:1px solid skyblue;
border-bottom: none;
}
.user-list>li:last-child{
border-bottom:1px solid skyblue;
}
.content-wrapper{
flex:1;
}
</style>
<div id="app">
<div class="main">
<ul class="user-list">
<li v-for="user in users" #click="userId=user.id">{{user.name}}</li>
</ul>
<div class="content-wrapper">
<component v-if="userId" :is="isModify?'user-editor':'user-viewer'" #switch-edit-mode="toggleModify" :user-id="userId"></component>
<div v-else>please choose a user to view or edit</div>
</div>
</div>
</div>

Answer 2

your mixin file:(mixin.js)
export default{
props: {
userId: {
required: true
}
},
data () {
return {
user: {}
}
},
methods: {
loadUser () {
/*ajax to get user detail data here*/
setTimeout(_=>{
this.user = data.filter(o=>o.id==this.userId)[0]
},10)
}
},
created () {
this.loadUser()
},
watch: {
userId (newVal) {
if(newVal){
this.loadUser()
}
}
}
}
usage:
import mixin from 'mixin.js'
export default{
...
mixins: [mixin]
}