alepeino/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://unpkg.com/vue"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.min.js"></script> -->
  <!-- <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script> -->
</head>
<body>
  <div id="root">
    <div v-for="(tarifas, codigo) in dataTarifas">
      <tarifa v-bind:tarifa="tarifas" inline-template>
        <div>
          <div>{{ titulo }}</div>
          <div>
            <ul>
              <li v-for="inclusion in inclusiones">
                {{ inclusion.translations[0].descripcion }}
              </li>
            </ul>
          </div>
          <div>
            <select v-model="region_id_seleccionada">
              <option v-for="region in tarifa"
                      v-bind:value="region.region_id">
                {{ region.region.translations[0].nombre }}
              </option>
            </select>
          </div>
        </div>
      </tarifa>
    </div>
  </div>

  <script>
    var data = {
      SE: [
        {
          id: 1,
          codigo: 'SE',
          region_id: 1,
          region: {
            id: 1,
            translations: [
              {
                nombre: 'Francia'
              }
            ]
          },
          translations: [
            {
              titulo: 'Super See Europe'
            }
          ],
          inclusiones: [
            {
              id: 1,
              translations: [
                {
                  descripcion: 'Conductor Adicional'
                }
              ]
            },
            {
              id: 2,
              translations: [
                {
                  descripcion: 'CDW'
                }
              ]
            }
          ]
        },
        {
          id: 3,
          codigo: 'SE',
          region_id: 247,
          region: {
            id: 247,
            translations: [
              {
                nombre: 'Francia 2'
              }
            ]
          },
          translations: [
            {
              titulo: 'Super See Europe'
            }
          ],
          inclusiones: [
            {
              id: 1,
              translations: [
                {
                  descripcion: 'Otra cosa'
                }
              ]
            }
          ]
        }
      ],
      SSEAI: [
        {
          id: 1,
          codigo: 'SSEAI',
          region_id: 1,
          region: {
            id: 1,
            translations: [
              {
                nombre: 'Francia'
              }
            ]
          },
          translations: [
            {
              titulo: 'Super See Europe All Inclusive'
            }
          ],
          inclusiones: [
            {
              id: 1,
              translations: [
                {
                  descripcion: 'Conductor Adicional XX'
                }
              ]
            },
            {
              id: 2,
              translations: [
                {
                  descripcion: 'CDW'
                }
              ]
            }
          ]
        }
      ]
    };

    Vue.component('tarifa', {
      props: ['tarifa'],
      data: function () {
        return {
          titulo: this.tarifa[0].translations[0].titulo,
          region_id_seleccionada: this.tarifa[0].region_id
        };
      },
      computed: {
        inclusiones: function () {
          var region_id_seleccionada = this.region_id_seleccionada;
          var tarifaRegion = this.tarifa.filter(function (t) {
            return t.region_id == region_id_seleccionada;
          })[0];
          return tarifaRegion ? tarifaRegion.inclusiones : [];
        }
      }
    });

    var app = new Vue({
      el: '#root',
      data: {
        dataTarifas: {}
      }
    });

    app.dataTarifas = data;
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://unpkg.com/vue"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.min.js"></script> -->
	<!-- <script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script> -->
	</head>
	<body>
	<div id="root">
	<div v-for="(tarifas, codigo) in dataTarifas">
	<tarifa v-bind:tarifa="tarifas" inline-template>
	<div>
	<div>{{ titulo }}</div>
	<div>
	<ul>
	<li v-for="inclusion in inclusiones">
	{{ inclusion.translations[0].descripcion }}
	</li>
	</ul>
	</div>
	<div>
	<select v-model="region_id_seleccionada">
	<option v-for="region in tarifa"
	v-bind:value="region.region_id">
	{{ region.region.translations[0].nombre }}
	</option>
	</select>
	</div>
	</div>
	</tarifa>
	</div>
	</div>

	<script>
	var data = {
	SE: [
	{
	id: 1,
	codigo: 'SE',
	region_id: 1,
	region: {
	id: 1,
	translations: [
	{
	nombre: 'Francia'
	}
	]
	},
	translations: [
	{
	titulo: 'Super See Europe'
	}
	],
	inclusiones: [
	{
	id: 1,
	translations: [
	{
	descripcion: 'Conductor Adicional'
	}
	]
	},
	{
	id: 2,
	translations: [
	{
	descripcion: 'CDW'
	}
	]
	}
	]
	},
	{
	id: 3,
	codigo: 'SE',
	region_id: 247,
	region: {
	id: 247,
	translations: [
	{
	nombre: 'Francia 2'
	}
	]
	},
	translations: [
	{
	titulo: 'Super See Europe'
	}
	],
	inclusiones: [
	{
	id: 1,
	translations: [
	{
	descripcion: 'Otra cosa'
	}
	]
	}
	]
	}
	],
	SSEAI: [
	{
	id: 1,
	codigo: 'SSEAI',
	region_id: 1,
	region: {
	id: 1,
	translations: [
	{
	nombre: 'Francia'
	}
	]
	},
	translations: [
	{
	titulo: 'Super See Europe All Inclusive'
	}
	],
	inclusiones: [
	{
	id: 1,
	translations: [
	{
	descripcion: 'Conductor Adicional XX'
	}
	]
	},
	{
	id: 2,
	translations: [
	{
	descripcion: 'CDW'
	}
	]
	}
	]
	}
	]
	};

	Vue.component('tarifa', {
	props: ['tarifa'],
	data: function () {
	return {
	titulo: this.tarifa[0].translations[0].titulo,
	region_id_seleccionada: this.tarifa[0].region_id
	};
	},
	computed: {
	inclusiones: function () {
	var region_id_seleccionada = this.region_id_seleccionada;
	var tarifaRegion = this.tarifa.filter(function (t) {
	return t.region_id == region_id_seleccionada;
	})[0];
	return tarifaRegion ? tarifaRegion.inclusiones : [];
	}
	}
	});

	var app = new Vue({
	el: '#root',
	data: {
	dataTarifas: {}
	}
	});

	app.dataTarifas = data;
	</script>
	</body>
	</html>