CODEWITHSUNDEEP
javascriptvue.jsaxios
vimuth
vimuth

Reputation: 5602

Vue wrapper component not working properly with axios

Hi I'm trying to change my vue wrapper component dropdown with axios. This is my code.

<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/[email protected]/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>

The problem I have is when I try to add selected item it's not working inside axios. And it's working properly outside axios.

vm.input.selected = 2;

enter image description here

I got selected the all initially as the image shows. Think ajax call does not matter so I reduced the code complexity a bit. Thanks.

Upvotes: 0

Views: 784

Answers (3)

Be Kind
Be Kind

Reputation: 5172

You've encountered change detection caveat.

Use Vue.set(vm.input, 'selected', value) (or vm.$set) to update properties of your objects.

Upvotes: 1

vimuth
vimuth

Reputation: 5602

seems like I had issues with with wrapper component. After I changed the order of options and value in the component's watch this was fixed. I'm adding this in case anyone in the future faced the same issue.

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

Upvotes: 0

Sajib Khan
Sajib Khan

Reputation: 24136

You need to recreate the input object inside the axios: 

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);
  });

Upvotes: 1

Related Questions