Vue Компонент не загружает используемое значение

Question

У меня есть приложение Vue, использующее JS. Мне нужно было использовать некоторые Select2 для динамически загружаемых значений, между прочим. Я сделал Vue Компонент для моего Select2, который работал прекрасно, за исключением одной проблемы. Я использую Ajax, чтобы получить параметры Dynami c для Select2, но когда смонтирован мой Select2, он не загружает значение для URL Ajax. Это мой код:

<template>
    <table class="table">
        <thead>
        <tr>
            <th>Substance</th>
            <th>Tested</th>
            <th>Results</th>
            <th>Cause of Death</th>
            <th>Person Perscribed For</th>
            <th>Category</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="index in SubstanceRows" :key="index">
            <td><input type="text" class="form-control form-control-sm substance-row" /></td>
            <td><select2 class="js-example-basic-single tested-row" :apiurl="SummaryTested" style="width: 100%;"></select2></td>
            <td><select2 class="js-example-basic-single result-row" :apiurl="SummaryResult" style="width: 100%;"></select2></td>
            <td><div class="form-check"><input type="checkbox" class="form-check-input cause-of-death-row" value=""></div></td>
            <td><select2 class="js-example-basic-single obtained-for-row" :apiurl="DrugObtainedFor" style="width: 100%;"></select2></td>
            <td><div class="form-check"><input type="text" class="form-control form-control-sm category-row" /></div></td>
        </tr>
        </tbody>
    </table>
</template>
<script type="text/x-template" id="select2-template">
  <select>
    <slot></slot>
  </select>
</script>

А это мой компонент:

Vue.component('select2', {
    props: ['apiurl', 'id'],
    template: '#select2-template',
    mounted: function(){
        this.loadSelect2
    },
    watch: {
        loadSelect2: function() {
            var vm = this
            var apiURL = this.apiurl
            $(this.$el).select2({
                placeholder: "Select an option",
                allowClear: true,
                templateResult: dropdownTemplate,
                templateSelection: dropSelection,
                ajax: {
                    url: function(params){
                        url = 'api/variable/' + apiURL
                        if(params.term) url = 'api/variable/' + apiURL + '/' + params.term
                        return url
                    }
                }
            })
            //Check if it has a value assigned
            if (vm.$root[apiURL] && vm.$root[apiURL] != ''){
                $.ajax({
                    type: 'GET',
                    url: '/api/variable/' + apiURL + '/' + vm.$data[apiURL]
                }).then(function(data) {
                    var option = new Option(data.results[0].label, data.results[0].id, true, true)
                    element.append(option).trigger('change')
                    element.trigger({
                        type: 'select2:select',
                        params: {
                            data: data.results
                        },
                        templateResult: dropdownTemplate,
                        templateSelection: dropSelection
                    })
                })
            }
        }
    }
})

Часть, в которой я застрял, состоит в том, что, как вы можете видеть (или нет), я ' Я использую v-for для генерации этих полей, используя переменную, которую я объявил внутри приложения Vue. У меня есть кнопка, которая добавляет больше из них по мере необходимости (на данный момент я просто добавляю +1 к переменной). Проблема в том, что я делаю ajax для select2. Часть, которая сообщает /api/variable + apiURL, при первом генерировании переменная apiURL не определена. Я должен отметить, что переменная v-for, SubstanceRows, имеет начальное значение 3 (поэтому у меня есть три строки, когда она загружается). Однако, когда я добавляю строку с помощью кнопки, она работает просто отлично, и URL-адрес загружается, как и положено. Я предполагаю, что это некоторая проблема с асинхронностью, но мне действительно не хватает опыта с Vue, чтобы выяснить, что это такое.

Кроме того, часть сценария id=select2-template, я выполнил это руководство, но я понятия не имею, что он делает.

Answer 1

Вы пытались переместить функцию loadSelect2 с watch на methods? Насколько я знаю, часы используются для прослушивания реквизита. смотреть реквизиты, если есть обновление данных из родительского компонента.

, поэтому это будет выглядеть так:

    mounted: function(){
        this.loadSelect2();
    },
    methods: {
        loadSelect2: function() {
            var vm = this
            var apiURL = this.apiurl

           // the rest of the code

        }

Answer 2

когда вы вызываете var apiURL = this.apiURL неверно. Ваша пропелла - все в нижнем регистре, если это не var apiUrl = this.apiurl

Answer 3

Это потому, что у вас нет props или propsData в методе mounted, они появляются только позже. Поставь то же самое. Функция в наблюдателе, так что когда apiUrl изменяет значение (получает ненулевое / неопределенное значение), вы затем вызываете функцию.