Vue JS проблема с JQuery получить - PullRequest
Новая
       1

Vue JS проблема с JQuery получить

0 голосов
/ 31 декабря 2018

Привет. Я пытаюсь получить данные через ajax и использую vue wrapper component.Вот мой код. 

  <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>

После загрузки элементов в раскрывающемся списке мне нужно изменить выбранный элемент следующим образом: 

vm.input.selected = 2;

Но, к сожалению, этого не происходит после запроса ajax.Если я добавил массив до AJAX, это произойдет, как и ожидалось, но мне нужны данные из AJAX-запроса.И я уменьшил сложность кода для лучшей наглядности.Вот jsfiddle для выпуска.Я думаю, что проблема с компонентом vue.

1 Ответ

0 голосов
/ 31 декабря 2018

Я провел несколько тестов, и кажется, что вы, по сути, меняете значение select2 до его параметров, и, так как параметр 2 не существует, изменение прекращается.

Как я уже упоминал в своем комментарии, изменение порядка options и value в watch компонента исправляет это, вероятно, потому, что таким образом параметры изменяются непосредственно перед установкой нового значения.

Рабочий пример: 

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: {
    options: function(options) {
      // update options
      $(this.$el).empty().select2({
        data: options
      })
    },
    value: function(value) {
      // update value
      $(this.$el)
        .val(value)
        .trigger('change')
    }
  },
  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;
        //      setTimeout(() =>  { vm.input.selected = 2; }, 0);
      });
    }
  }
});
html,
body {
  font: 13px/18px sans-serif;
}

select {
  min-width: 300px;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...