Vuejs Implementing a currency settlement custom control

Vue.component (' Currency-input ', {Template:‘<div> <label v-if= "label" >{{label}}</label> $ <input ref= "input" V-bind:value= "value" v-on:input= "Updatevalue ($event. Target.value)" v-on:focus= "SelectAll" V-on:blu R= "Formatvalue" > </div>‘, props: {value: {type:number,default: 0}, Label: {type:string,default: ‘‘}}, mounted:function () {     This. Formatvalue ()}, methods: {updatevalue:function(value) {varresult = Currencyvalidator.parse (value, This. Value)if(result.warning) { This. $refs. Input.value =Result.value} This. $emit (' input ', Result.value)}, Formatvalue:function () {       This. $refs. Input.value = Currencyvalidator.format ( This. Value)}, SelectAll:function(event) {//workaround for Safari bug      //Http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chromeSetTimeout (function() {Event.target.select ()},0)    }  }})NewVue ({el:' #app ', data: {Price:0, Shipping:0, Handling:0, Discount:0}, computed: {total:function () {      return ((         This. Price * 100 + This. Shipping * 100 + This. Handling * 100- This. Discount * 100      ) /+). ToFixed (2)    }  }

<Scriptsrc= "Https://unpkg.com/vue/dist/vue.js"></Script><Scriptsrc= "https://cdn.rawgit.com/chrisvfritz/5f0a639590d6e648933416f90ba7ae4e/raw/ 98739fb8ac6779cb2da11aaa9ab6032e52f3be00/currency-validator.js "></Script><DivID= "App">  <Currency-inputlabel= "Price"V-model= "Price"  ></Currency-input>  <Currency-inputlabel= "Shipping"V-model= "Shipping"  ></Currency-input>  <Currency-inputlabel= "Handling"V-model= "Handling"  ></Currency-input>  <Currency-inputlabel= "Discount"V-model= "Discount"  ></Currency-input>    <P>Total: ${{All}}</P></Div>

Vuejs Implementing a currency settlement custom control