私はvue.jsを初めて使用しています。選択した値に基づいて、ある選択肢のオプションを別のものに動的に設定しようとしています。Vuejsで動的な2つのリレーショナルドロップダウンを作成する方法
たとえば、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からロードするにはどうすればよいですか?
も、これが私の答えより良い説明:) – serkan
serkandemirel0420 @そのすべての良い:) *すべて*オプションがすでに使用可能であった場合は、計算されたプロパティが選ぶとよいでしょう。 – Bert
vue.js jQuery axaxまたはvue-resourceで好きなajaxメソッドを教えてください。 vue-resourceを使用するのに問題があります。場合によってはjsonを返す文字列を返し、時には配列を返す – alien