【Vue.js】ajaxを利用した連動するプルダウン

Question

Vue.jsとajaxを利用して、都道府県を選択すると、ajaxでその都道府県の市区町村リストを取得し、市区町村のプルダウンに表示する、という機能を実装したいです。
（アプリケーションはLaravel5.8を利用して実装しています）

現在添付のようなコードを書いており、以下の挙動を確認しています。

• ajax通信自体は成功しており、res.dataに渡したい値（選択した都道府県の市区町村のリスト）が入っている
• (1)の位置で適当な配列を返すと、市区町村のプルダウンに反映される
• (2)の位置で適当な配列を返しても、市区町村のプルダウンに反映されない

また、都道府県のプルダウンのchangeイベントをトリガにしてajaxGetCityListを発火させる方法も試しましたが、やはり取得した市区町村リストをプルダウンにうまく渡すことが出来ません。
ajaxで取得した値をプルダウンに渡すにはどのようにしたらよいでしょうか。

<template>
    <div class="input-group">
        <div class="input-group-addon">都道府県</div>
        <select class="form-control" :name="'pref'" v-model="selectedpref" options="preves">
            <option value="">選択して下さい</option>
            <option v-for="pref in preves" v-bind:value="pref.value">
                {{ pref.text }}
            </option>
        </select>
        <div class="input-group-addon">市区町村</div>
        <select class="form-control" :name="'city'" v-model="selectedcity" options="cities">
            <option value="">選択して下さい</option>
            <option v-for="city in ajaxGetCityList(selectedpref)" v-bind:value="city.value">
                {{ city.text }}
            </option>
        </select>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        props: {
            cityval: String, // 市区町村（保存されている値）
            prefval: String, // 都道府県（保存されている値）
            preves: Array, // 都道府県の選択肢
        },
        data: function() {
            return {
                selectedpref: this.prefval,
                selectedcity: this.cityval,
                cities: [],
            }
        },
        methods: {
            ajaxGetCityList: function(pref) {
                // (1)
                return axios.get('/ajax_get_city/'+pref)
                .then((res) => {
                    // (2)
                    return res.data;
                });
            }
        },
        mounted() {
            console.log(this);
        }
    }
</script>

Answer 1

v-forにメソッドを書いても恐らく望まれた動作はしないと思いますので「選択中都道府県の値を監視→変更があったときに取得処理→dataへ注入」という方法はどうでしょうか。
変更追記箇所のみ抜粋ですが市区町村のoptionはcitiesを回してください。

<script>
  export default {
    watch: {
      selectedpref() {
        // 都道府県が変わるため選択された市区町村はリセット
        this.selectedcity = ''
        this.ajaxGetCityList()
      }
    },
    methods: {
      ajaxGetCityList: function() {
        axios.get('/ajax_get_city/'+this.selectedpref)
        .then((res) => {
          this.cities = res.data
        });
      }
    },
    mounted() {
      this.ajaxGetCityList()
    }
  }
</script>

Comments

[bluezircon]

いただいたコードで無事解決いたしました。
watchプロパティには全く思い至らず、大変勉強になりました。ありがとうございました。

なお今回はページが読みこまれた段階で保存されている市区町村が選択されている状態にしたかったため、mounted()でもthis.ajaxGetCityList();を呼ぶようにしました。