réinitialisation variable avant appel ajax (vue js)

sylvain
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je selectionne un Pays, et je voudrais réinitialiser une valeur avant de lancer la methode
getStates.
Car si je choisi, Pays, Region et Ville.
Au changement de Pays, il m'envoi dans getStates des parametres et notamment la region qui etait précedemment selectioné.
Ce que je ne veux pas

<html lang="en">
<head>
  <title>Dynamic Dependent Dropdown with Vue JS and PHP - ItSolutionStuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div class="container" id="myApp">

    <h3>Dynamic Dependent Dropdown with Vue JS and PHP</h3>

    <div class="form-group">
        <label>Select country:</label>
        <select class='form-control' v-model='country' @change='getStates()'>
          <option value='0' >Select country</option>
          <option v-for='data in countries' :value='data.id'  >{{ data.name }}</option>
        </select>
    </div>

    <div class="form-group">
        <label>Select state:</label>
        <select class='form-control' v-model='state' @change='getCities()'  >
          <option value='0' >Select state</option>
          <option v-for='data in states' :value='data.id'>{{ data.name }}</option>
        </select>
    </div>

    <div class="form-group">
        <label>Select city:</label>
        <select class='form-control' v-model='city' >
          <option value='0' >Select city</option>
          <option v-for='data in cities' :value='data.id'  >{{ data.name }}</option>
        </select>
    </div>

</div>

<script type="text/javascript">
var app = new Vue({
  el: '#myApp',
  data: {
    country: 0,
    countries: '',
    state: 0,
    states: '',
    city: 0,
    cities: ''
  },
  methods: {
    getCountries: function(){
      axios.get('ajaxpro.php', {
        params: {
          request: 'country'
        }
      })
      .then(function (response) {
         app.countries = response.data;

         app.states = '';
         app.cities = '';
         app.state = 0;
         app.city = 0;
         //app.country = app.countries[0].id
      });

    },
    getStates: function(){
      axios.get('ajaxpro.php', {
         params: {
           request: 'state',
           country_id: this.country
         }
      })
      .then(function (response) {
         app.states = response.data;
         app.state = 0;

         app.cities = '';
         app.city = 0;
        //app.state = app.states[0].id

      }); 
    }, 
    getCities: function(){

      axios.get('ajaxpro.php', { 
        params: {
          request: 'city',
          state_id: this.state
        }
      }) 
      .then(function (response) {
        app.cities = response.data;
        app.city = 0;
      //app.city = app.cities[0].id

      }); 
    }
  },
  created: function(){
    this.getCountries();
    this.getStates();
    this.getCities();
  }
});
</script>

</body>
</html>

du coté de php

<?php

    $mysqli = new mysqli($hostName, $username, $password, $dbname);

    switch ($_GET['request']) {
        case 'country':
            $sql = "SELECT * FROM countries";
            break;

        case 'state':
        if($_GET['country_id'] == '0'){
            $sql = "SELECT * FROM states";
        } else {
            $sql = "SELECT * FROM states WHERE country_id = ". $_GET['country_id'];
        }

            break;

        case 'city':
        if($_GET['state_id'] =='0'){
            $sql = "SELECT * FROM cities";
        } else {
            $sql = "SELECT * FROM cities WHERE state_id = ". $_GET['state_id'];
        }

            break;

        default:
            break;
    }

    $result = $mysqli->query($sql);

    $response = [];
    while($row = mysqli_fetch_assoc($result)){
       $response[] = array("id"=>$row['id'], "name"=>$row['name']);
    }

    echo json_encode($response);

?>

Ce que je veux

avant l'appel Ajax, je souhaite mettre a null une valeur quelconque.

Ce que j'obtiens

L'appel de la méthode ajax avec les mauvais parametres fausse le resultat pout les suivantes selectbox

Aucune réponse