Javascript Vue js与jquery get的问题_Javascript_Ajax_Vue.js

Javascript Vue js与jquery get的问题

javascript ajax vue.js

Javascript Vue js与jquery get的问题,javascript,ajax,vue.js,Javascript,Ajax,Vue.js,嗨，我正在尝试通过ajax和vue包装组件获取数据。这是我的密码 <html> <head> <title>title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>

嗨，我正在尝试通过ajax和vue包装组件获取数据。这是我的密码

  <html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            html, body {
                font: 13px/18px sans-serif;
            }
            select {
                min-width: 300px;
            }
        </style>
    </head>
    <body>
        <div id="el"></div>

        <!-- using string template here to work around HTML <option> placement restriction -->
        <script type="text/x-template" id="demo-template">
            <div>
            <p>Selected: {{ input.selected }}</p>
            <select2 :options="options" v-model="input.selected">
            <option disabled value="0">Select one</option>
            </select2>
            </div>
        </script>

        <script type="text/x-template" id="select2-template">
            <select>
            <slot></slot>
            </select>
        </script>
        <script src="http://themestarz.net/html/craigs/assets/js/jquery-3.3.1.min.js"></script>
        <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script>
            Vue.component('select2', {
                props: ['options', 'value'],
                template: '#select2-template',
                mounted: function () {
                    var vm = this;
                    $(this.$el)
                            // init select2
                            .select2({data: this.options})
                            .val(this.value)
                            .trigger('change')
                            // emit event on change.
                            .on('change', function () {
                                vm.$emit('input', this.value)
                            });
                },
                watch: {
                    value: function (value) {
                        // update value
                        $(this.$el)
                                .val(value)
                                .trigger('change')



                    },
                    options: function (options) {
                        // update options
                        $(this.$el).empty().select2({data: options})
                    }
                },
                destroyed: function () {
                    $(this.$el).off().select2('destroy')
                }
            })

            var vm = new Vue({
                el: '#el',
                template: '#demo-template',
                data: {
                    input: {
                        selected: "all"
                    },
                    options: []
                },
                created: function () {
                    this.mymethod();
                },
                methods: {
                    mymethod: function () {
                        var vm = this;


                        $.get("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {
                            vm.options = [
                                {id: 'all', text: 'All'},
                                {id: 1, text: 'Hello'},
                                {id: 2, text: 'World'},
                                {id: 3, text: 'Bye'}
                            ];

                            vm.input.selected = 2;
                        });
                    }
                }
            });
        </script>
    </body>
</html>

但不幸的是，在ajax请求之后，这并没有发生。如果我在ajax之前添加了数组，它会按照预期的那样发生，但是我需要ajax请求中的数据。我还降低了代码的复杂性，以提高可视性。

这里有一个问题。我认为问题出在vue组件上。

我做了一些测试，看起来您实际上是在更改select2的选项之前更改了它的值，而且由于选项

不存在，更改失败了

正如我在评论中提到的，在组件的

watch

中更改

options

和

value

的顺序可以解决这一问题，可能是因为这样在设置新值之前就更改了选项

工作示例：

Vue.component（'select2'{
道具：['options'，'value']，
模板：'#选择2模板'，
挂载：函数（）{
var vm=这个；
$（此。$el）
//初始化选择2
.选择2({
数据：这是一个选项
})
.val（此.value）
.trigger（'更改'）
//在更改时发出事件。
.on（'change'，function（））{
vm.$emit（'input'，this.value）
});
},
观察：{
选项：功能（选项）{
//更新选项
$（this.$el）.empty（）。选择2({
数据：选项
})
},
值：函数（值）{
//更新值
$（此。$el）
.val（值）
.trigger（'更改'）
}
},
已销毁：函数（）{
$（this.$el）.off（）。选择2（'destroy'）
}
})
var vm=新的Vue({
el:“#el”，
模板：“#演示模板”，
数据：{
输入：{
选定：“全部”
},
选项：[]
},
已创建：函数（）{
这个.mymethod（）；
},
方法：{
mymethod:function（）{
var vm=这个；
$.get（”https://api.coindesk.com/v1/bpi/currentprice.json，函数（数据）{
vm.options=[{
id:'所有'，
文字：“全部”
},
{
id:1，
短信：“你好”
},
{
id:2，
文字：“世界”
},
{
id:3，
文字：“再见”
}
];
vm.input.selected=2；
//setTimeout（（）=>{vm.input.selected=2；}，0）；
});
}
}
});
html，
身体{
字体：13px/18px无衬线；
}
挑选{
最小宽度：300px；
}

选定：{input.Selected}
选择一个
Ajax/jQuery与此问题完全无关。您正在更改应用程序的输入。已选择，但您的设置不反映更改。这就是问题所在。我认为它在某种程度上是相关的，因为当我在ajax之外添加它时，它工作得很好，我可以证实这一点。当我执行此操作时，setTimeout（（）=>{vm.input.selected=2；}，0）
它开始工作，这可能意味着值在选项之前发生了更改。事实上，如果您在watch:中切换顺序，它将在没有超时的情况下工作。
vm.input.selected = 2;