Vue 包装器组件无法与 axios 一起正常工作答案

【问题标题】：Vue wrapper component not working properly with axiosVue 包装器组件无法与 axios 一起正常工作
【发布时间】：2019-01-03 15:05:15
【问题描述】：

您好，我正在尝试使用 axios 更改我的 vue 包装器组件下拉列表。这是我的代码。

<html>
    <head>
        <title>title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </style>
    </head>
    <body>
        <div id="el"></div>
        <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;
                        axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
                                .then(function (response) {
                                    vm.options = [
                                        {id: 'all', text: 'All'},
                                        {id: 1, text: 'Hello'},
                                        {id: 2, text: 'World'},
                                        {id: 3, text: 'Bye'}
                                    ];
                                    vm.input.selected = 2;
                                })
                                .catch(function (error) {
                                    console.log(error);
                                });
                    }
                }
            });
        </script>
    </body>
</html>

我遇到的问题是，当我尝试添加所选项目时，它在 axios 中不起作用。它在 axios 之外也能正常工作。

vm.input.selected = 2;

如图所示，我最初选择了 all。认为 ajax 调用无关紧要，所以我稍微降低了代码复杂度。谢谢。

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

您需要在axios 中重新创建input 对象：

vm.input = { selected: 2 };

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

    // recreate the 'input' object for reactivity
    vm.input = { selected: 2 };
  })
  .catch(function (error) {
    console.log(error);
  });

【讨论】：

【解决方案2】：

你遇到过change detection caveat。

使用 Vue.set(vm.input, 'selected', value)（或 vm.$set）来更新对象的属性。

【讨论】：

如果您能更具体一些，那将会很有帮助。真的很抱歉我对此有点陌生
@vimuth 只需将vm.input.selected = 2; 替换为vm.$set(vm.input, 'selected', value);。它与原始声明相同，但不会牺牲反应性 :) 强烈建议查看有关 vue 警告的页面 - 在您了解基础知识之后立即阅读下一个重要内容。

【解决方案3】：

似乎我在使用包装器组件时遇到了问题。在我更改组件的 watch 中 options 和 value 的顺序后，此问题已修复。我添加这个以防将来有人遇到同样的问题。

watch: {
    options: function(options) {
      // update options
      $(this.$el).empty().select2({
        data: options
      })
    },
    value: function(value) {
      // update value
      $(this.$el)
        .val(value)
        .trigger('change')
    }
  },

【讨论】：