Solicito nueva ayuda


#1

Hola pretendo cargar dinamicamente valores de “option” de 3 en función del valor escogido en el anterior partiendo de los valores contenidos en el archivo “productos.json”; el tema es que carga bien el “grupo”, al selecionar una de este, el “especie” carga bien, pero al seleccionar una del “especie” el “variedad” no carga ninguna , espero haberme explicado y aluien pueda ayudarme, adjunto los archivos .html, .js y .json usados, saludos y gracias.

formAltaPublicacion.html


	<html lang='es'>

	<head>
        <title>Mi título</title>
		<meta charset='utf-8' />
    </head>
	
	<body>
		<form id="altaPublicacion" action="/script/altapublicacion.php" method="post">
			<label>Grupo: </label>
			<select v-model="grupoSelected">
				<option disabled value="">Seleccione un grupo..</option>
				<option v-for="(grupo, gKey, gIndex) in productos" v-bind:value="gKey">
					{{ grupo['gAlias'] }} 
				</option>
			</select>
		
			<br />
			<label>Especie: </label>
			<select v-model="especieSelected">
				<option disabled value="">Seleccione una especie..</option>
				<option v-for="(especie, eKey, eIndex) in productos[grupoSelected]" v-bind:value="eKey">
					{{ especie['eAlias'] }}
				</option>
			</select>
		
			<br />
			<label>Variedad: </label>
			<select v-model="variedadSelected">
				<option disabled value="">Seleccione una variedad..</option>
				<option v-for="(variedad, vKey, vIndex) in productos.grupoSelected[0].especieSelected" v-bind:value="vKey">
					{{ variedad['vAlias'] }}
				</option>
			</select>
		
			<br /><pre>Seleccionado: {{ grupoSelected }} </pre>
			<br /><pre>Seleccionado: {{ especieSelected }} </pre>
			<br /><pre>Seleccionado: {{ variedadSelected }} </pre>
		</form>
		
		<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>
		<script src='./js/main.js'></script>
	</body>
	
	</html>

main.js

      el: '#altaPublicacion',
      data: {
        productos: [],
		grupoSelected: null,
		especieSelected: null,
		variedadSelected: null
	  },
	  created: function(){
		this.getProductos()
	  },
	  methods: {
		getProductos: function(){
			axios.get("./files/productos.json").then(response => {this.productos = response.data;})
		}
	  }
    });

productos.json

	"1": {
		"gAlias": "Hortalizas hoja y brote",
		"1": {
			"eAlias": "Acelga",
			"1": {
				"vAlias": "unica"
			}
		},
		"2": {
			"eAlias": "Albahaca",
			"3": {
				"vAlias": "Planta"
			},
			"4": {
				"vAlias": "Sobre"
			}
		}
	},
	"2": {
		"gAlias": "Hortalizas Secas",
		"3": {
			"eAlias": "Ajo",
			"14": {
				"vAlias": "Importado"
			},
			"15": {
				"vAlias": "Importado"
			}
		},
		"4": {
			"eAlias": "Boniato",
			"5": {
				"vAlias": "Arapey"
			},
			"6": {
				"vAlias": "Morada"
			},
			"8": {
				"vAlias": "Morada Inta"
			},
			"7": {
				"vAlias": "Beauregard"
			},
			"9": {
				"vAlias": "Piel amarilla"
			},
			"10": {
				"vAlias": "Piel colorada"
			},
			"11": {
				"vAlias": "Zanahoria"
			},
			"12": {
				"vAlias": "Importado"
			},
			"13": {
				"vAlias": "Otro"
			}
		}
	}
}

#2

Hola, en este codigo

<select v-model="variedadSelected">
  <option disabled value="">Seleccione una variedad..</option>
  <option v-for="(variedad, vKey, vIndex) in productos.grupoSelected[0].especieSelected" v-bind:value="vKey">
    {{ variedad['vAlias'] }}
  </option>
</select>

esta parte parece erronea: productos.grupoSelected[0].especieSelected.


#3

Hola “miljan” y gracias por tu respuesta. Si pienso que el problema está ahí, pero también probe con la forma más lógica para mi que es: productos[grupoSelected][especieSelected] y tampoco funcionó, ¿tu tienes alguna sugerencia de solución…?, gracias


#4

Sí, productos[grupoSelected][especieSelected] tiene mas sentido. Si no te funciona lo mas probable es que productos no tenga la estructura adecuada. Haz varias pruebas, por ejemplo enderiza {{ productos[1][2] }} y evalua el resultado. Lo que seas capaz de renderizar manualmente lo podra renderizar Vue programaticamente.


#5

Gracias miljan, probaré tu recomendación y aviso resultados, un saludo