JSFiddle - React, Tailwind, and code Playground

by Arturo Gallegos

HTML

<div id="app">
  <h1>Servicios</h1>
  <label v-for="item in servicios">
    <input type="checkbox" :value="item.costo" v-model="servicios_usuario">
    {{ item.servicio }}
  </label>
  <pre>{{ servicios_usuario }}</pre>
  <strong>Total: {{ total }}</strong>
</div>

JavaScript

new Vue({
	el:'#app',
  data(){
  	return {
    	servicios_usuario:[],
    	servicios:[
      	{servicio:'A', costo:1200},
        {servicio:'B', costo:800},
        {servicio:'C', costo:1500},
        {servicio:'D', costo:900},
        {servicio:'E', costo:500},
      ]
    }
  },
  computed:{
  	total(){
    	let this_ = this, total = 0;
      for(i=0;i<this_.servicios_usuario.length;i++){
      	console.log(this_.servicios_usuario[i])
      	total += this_.servicios_usuario[i];
      }
      return total;
    }
  }
})