vue.js でselectの生成、selectの値をajaxで取ってくる版

ajaxについてはvue.jsではaxiosというのが推奨されている、とのことです。

github.com

なんでとりえあず、html側にaxios追加。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
    <select v-model="category">
        <option value="">--選択してください--</option>
        <option v-for="option in catOptions" v-bind:value="option.value">
        {{ option.text }}
        </option>
    </select>
    <span>first Selected: {{ category }}</span>
</div>

んで、jsの方はこんな感じになるのかな。

var app = new Vue({
    el: '#app',
    data: {
        category: '',
        catOptions: []
    },
    created: function() {
          var catOptions = this.catOptions;
          axios.get('category.php').then(function(response) {
            for (var i = 0; i < response.data.length; i++) {
              catOptions.push(response.data[i]);
            }
          }).catch(function(error) {
            console.log('failure');
          })
    }
});

getしてるcategory.phpがJSONで返すイメージです。