动态获取标签

1. 动态获取标签

Vue.component('v-select',VueSelect.VueSelect);

let createQuestionApp = new Vue({
    el: '#createQuestionApp',
    data:{
        title:'',
        tags:[],
        selectedTags: [],
    },
    methods:{
        loadTags: function () {
            console.log("这是加载问题相关标签界面");
            $.ajax({
                url:'/v1/tags',
                methods: 'GET',
                success:function (r) {
                    // console.log(r);
                    if (r.code === OK){
                        let list = r.data;
                        // console.log(list);
                        let tags = []
                        for (let i = 0; i<list.length; i++) {
                            tags.push(list[i].name);
                        }
                        // console.log(tags);
                        createQuestionApp.tags = tags;
                    }
                }
            });
        }
    },
    created:function () {
        // console.log(createQuestionApp.tags)
        this.loadTags();
    }
});

• 这里使用ajax进行前后端传输 , /v1/tags是从后端后去标签的接口
• 通过循环把list中的name属性赋值给tags数组
• 然后把tags数组赋值给createQuestionApp.tags , html中已经进行了双向绑定

				<div class="form-group">
                    <label>请至少选择一个标签：</label>
                        <v-select multiple required v-model="selectedTags"
                            v-bind:options="tags" placeholder="请选择问题相关标签" ></v-select>
                </div>