１つ目のセレクトボックスの項目を非同期通信で取得。 そこで選択した項目を元に、２つ目のセレクトボックスの項目も非同期で取得する。 <div id="app"> <select v-model="selected_category_id"> <option v-for="item in category_list" :value="item.id">{{ item.name }}</option> </select> <div>{{ selected_category_id }}</div> <select v-model="selected_animal_id"> </select></div>

テキストフィールドに全て入力完了後、disabledが解除されて送信可能になるボタン。 <div id="app"> <div><input v-model="field1"></div> <div><input v-model="field2"></div> <div><input v-model="field3"></div> <div>{{ entered_all }}</div> <button :disabled="!entered_all">submit</button> </div> new Vue({ el: '#app', data: { field1: '', field2…

よくある「全て選択」チェックボックス。 <div id="app"> <div v-for="(item, index) in items"> <input type="checkbox" :value="item" v-model="checked_items">{{ labels[index] }} </div> <div>{{ checked_items }}</div> <input type="checkbox" v-model="checked_all">check_all<br> <div>{{ checked_all }}</div> </div> new Vue({ el: …

通常使用とは何なのかというと、HTMLのscriptタグ内で、new Vue() してやること…ということにします。単一ファイルコンポーネントは使いたい。 でも、他のHTML要素の方も、Vue.jsで制御したい。 その場合、どうすればいいか、調べてもよく分からなった。例え…