Vue -CMS combined json field

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<div id="interface">
  Video Path:<input type="text" v-model="path" />
  Video Autoplay:<input type="text" v-model="autoplay" />
  <div>
  {{path}} - {{autoplay}}
  </div>
	
	<div>
	JSON: {{ jsonfield }}
	
	<input type="text" v-model="jsonfield" value='{"colour":"red"}' />
	
  </div>
</div>
<br><br>
No components used so v-model can be given just a property name as $data is assumed as the context.

JavaScript

//---------------------------------------------------------
new Vue({
  el: '#interface',
  data() {
    return {
      path: "Ben",
      autoplay: "1"
    }
  },
		
	computed :{
		jsonfield:{
			get: function (){
				return JSON.stringify({path:this.path,autoplay:this.autoplay})
			},
			set: function(data){
				this.path = data.path;
				this.autoplay = data.autoplay;
			}
		}
	}
	

	
	
});