Vue JS Context Menu

Prototype for a context menu in vue js (allows you to edit the currently selected item)

by asemahle

HTML

<div id="app">

  <controller></controller>

</div>

<template id="controller">
  <select v-model="selected">
    <option selected>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <edit-box :message="selectedMessage"></edit-box>
  <message-display v-for="message in messages" :message="message"></message-display>
</template>

<template id="edit-box">
  <div>
    <binder :message='field' v-for="field in $parent.selected"></binder>
  </div>
</template>
   
<template id="binder">
  <div>
    <input type="text" v-model="message.value">
  </div>
</template>

<template id="message-display">
  <div>{{message.title.value}} - {{message.text.value}}</div>
</template>

JavaScript

Vue.component('controller', {
  template: '#controller',

  data: function() {
    return {
      messages: [{title: {value: 'A'}}, {title: {value: 'B'}}, {title: {value: 'C'}}],
      selected: null,
    }
  },
  
  computed: {
  	selectedMessage: function() {
    	if (this.selected === 'A') {
      	this.selected = this.messages[0];
      } else if (this.selected === 'B') {
      	this.selected = this.messages[1];
      } else {
      	this.selected = this.messages[2];
      }
    }
  },
  
  created: function() {
  	for (let i = 0; i < this.messages.length; i++) {
    	this.messages[i] = Object.assign({}, this.messages[i], {text: {value: 'Message'}})
    }
  }
});

Vue.component('edit-box', {
	template: '#edit-box',
});

Vue.component('binder', {
	template: '#binder',
  props: ['message']
})

Vue.component('message-display', {
  template: '#message-display',
  props: ['message']
});

new Vue({
  el: '#app',
});