LucianoCharlesdeSouza · May 23, 2020 14:22
diff --git a/Index.html b/Index.html
 <!doctype html>
 <html lang="pt-br">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Buscar cidades pelos estados</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

 </head>
 <body>

 <div id="app">

    <form @submit.prevent="cadastrar">

        <p>Estado:
            <select v-model="estadoAtual" @change="getCidades()">
                <option v-for="estado in estados" v-bind:value="estado.name">
                    {{ estado.name }}
                </option>
            </select>
        </p>

        <p>Cidade:
            <select v-model="cidadeAtual">
                <option value="" v-bind:selected="cidadeAtual">Selecione um estado acima</option>
                <option v-for="cidade in cidades" v-bind:value="cidade.name">
                    {{ cidade.name }}
                </option>
            </select>
        </p>
        <button type="submit">Cadastrar</button>

    </form>

 </div>

 <script>

    let app = new Vue({
        el: '#app',
        data: {
            estados: null,
            cidades: null,
            estadoAtual: null,
            cidadeAtual: ''
        },

        mounted: function () {
            axios
                .get('https://www.realtrueweb.com.br/vue/estados.php')
                .then(response => (
                    this.estados = response.data,
                        this.estadoAtual = this.estados[0].name
                ))
                .catch(error => console.log(error))
        },
        methods: {
            getCidades: function () {
                axios
                    .post('https://www.realtrueweb.com.br/vue/cidades.php', {
                        estado: this.estadoAtual
                    })
                    .then(response => (
                        this.cidades = response.data,
                            this.cidadeAtual = this.cidades[0].name
                    ))
                    .catch(error => console.log(error))
            }
        }


    })

 </script>
 </body>
 </html>
	<!doctype html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Buscar cidades pelos estados</title>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

	</head>
	<body>

	<div id="app">

	<form @submit.prevent="cadastrar">

	<p>Estado:
	<select v-model="estadoAtual" @change="getCidades()">
	<option v-for="estado in estados" v-bind:value="estado.name">
	{{ estado.name }}
	</option>
	</select>
	</p>

	<p>Cidade:
	<select v-model="cidadeAtual">
	<option value="" v-bind:selected="cidadeAtual">Selecione um estado acima</option>
	<option v-for="cidade in cidades" v-bind:value="cidade.name">
	{{ cidade.name }}
	</option>
	</select>
	</p>
	<button type="submit">Cadastrar</button>

	</form>

	</div>

	<script>

	let app = new Vue({
	el: '#app',
	data: {
	estados: null,
	cidades: null,
	estadoAtual: null,
	cidadeAtual: ''
	},

	mounted: function () {
	axios
	.get('https://www.realtrueweb.com.br/vue/estados.php')
	.then(response => (
	this.estados = response.data,
	this.estadoAtual = this.estados[0].name
	))
	.catch(error => console.log(error))
	},
	methods: {
	getCidades: function () {
	axios
	.post('https://www.realtrueweb.com.br/vue/cidades.php', {
	estado: this.estadoAtual
	})
	.then(response => (
	this.cidades = response.data,
	this.cidadeAtual = this.cidades[0].name
	))
	.catch(error => console.log(error))
	}
	}


	})

	</script>
	</body>
	</html>