Vuejsで動的な2つのリレーショナルドロップダウンを作成する方法

Question

私はvue.jsを初めて使用しています。選択した値に基づいて、ある選択肢のオプションを別のものに動的に設定しようとしています。

たとえば、divisionとdistrictという名前の2つのドロップダウンリストがあります。

Aの値が1の場合、地区選択で関連コードが読み込まれます。私はjQueryでそれをすることができますが、Vueではできません。

ここは私のテンプレートです。

<div class="form-group" :class="class_obj"> 
    <select name="div_code" v-model="div_code" class="form-control" required> 
    <option value="">Choose One</option> 
    <option v-for="option in div_list" v-bind:value="option.value"> 
     {{ option.text }} 
    </option> 
    </select> 
    </div> 

    <div class="form-group" :class="class_label"> 
    <label for="">District</label> 
    </div> 
    <div class="form-group" :class="class_obj"> 
    <select name="dist_code" v-model="dist_code" class="form-control" required> 
     <option value="">Choose One</option> 
    </select> 
    </div> 

ここは私のjavascriptです。

export default { 
    data():{ 
    div_list: [ 
     {'1': "ABC"} , {'2': "DEF"} 
    ]; 
    } 
} 

div_codeの値が1の場合、関連するデータを含むデータをajaxからロードするにはどうすればよいですか？

Answer 1

div_code変更

<select name="div_code" 
     v-model="div_code" 
     @change="onDivCodeChange" 
     class="form-control" 
     required> 
    <option value="">Choose One</option> 
    <option v-for="option in div_list" v-bind:value="option.value"> 
    {{ option.text }} 
    </option> 
</select> 

上の変更イベントを処理し、あなたのVueにonDivCodeChangeメソッドを追加します。

methods:{ 
    onCodeChange(){ 
    // make an ajax call and set the options for your 
    // dist_code here. For example: 
    $.ajax({ 
     url: "...", 
     data: {div_code: this.div_code}, 
     success: codes => this.code_list = codes 
     error: err => console.log(err) 
    }) 
    } 
} 

そしてもちろんのは、あなたのデータのプロパティとしてcode_listを追加し、テンプレートを更新します。

<select name="dist_code" v-model="dist_code" class="form-control" required> 
    <option value="">Choose One</option> 
    <option v-for="code in code_list" :value="code.value">{{code.text}}</option> 
</select> 

Answer 2

計算されたプロパティを作成します。基本的には、データプロパティが変更された場合（計算されたプロパティで使用する必要があります）、計算されたプロパティは自動的に更新されます。

以下の例のように、messageプロパティが変更されると、reverseMessage自体が更新されます。

<div id="example"> 
    <p>Original message: "{{ message }}"</p> 
    <p>Computed reversed message: "{{ reversedMessage }}"</p> 
</div> 

var vm = new Vue({ 
    el: '#example', 
    data: { 
    message: 'Hello' 
    }, 
    computed: { 
    // a computed getter 
    reversedMessage: function() { 
     // `this` points to the vm instance 
     return this.message.split('').reverse().join('') 
    } 
    } 
}) 

1-この例では、最初のドロップダウン値をデータプロパティにバインドします。

2 - 2番目のドロップダウンの計算プロパティを作成し、その中にデータ プロパティを使用します。

3 - テンプレートを記述します。

完了。

最初のドロップダウンが変更されると、2番目のドロップダウンが自動的に更新されます。

注：Vueのドキュメントでは、計算されたプロパティの代わりにAjaxリクエストにWatcherを使用することをお勧めします。どちらも非常に似ています。

https://vuejs.org/v2/guide/computed.html#Watchers