Vue 组件未加载使用的值

Question

我有一个使用 JS 的 Vue 应用程序。我需要使用一些 Select2 来动态加载值，等等。我为我的 Select2 制作了一个 Vue 组件，除了一个问题外，它工作得很好。我正在使用 Ajax 获取 Select2 的动态选项，但是当我的 Select2 安装时它没有加载 Ajax URL 的值。这是我的代码：

<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）。我遇到问题的地方是在为 select2 执行 ajax 时。说的/api/variable + apiURL的部分，在第一次生成的时候，变量apiURL是未定义的。我应该提到 v-for 变量 SubstanceRows 的初始值为 3（所以当它加载时我有三行）。但是，当我使用按钮添加一行时，它工作正常并且 url 按预期加载。我猜这是异步的一些问题，但我真的没有足够的 Vue 经验来弄清楚它是什么。

此外，脚本部分 id=select2-template，我是按照指南进行操作的，但我不知道它的作用。

Answer 1

这是因为您在 mounted 方法中没有 props 或 propsData 它们只会在以后出现。放一样。观察器中的函数，以便当 apiUrl 更改值（接收到非 null/undefined 值）时调用该函数。

Answer 2

当你调用 var apiURL = this.apiURL 是错误的。你的prop都是小写的，应该不是var apiUrl = this.apiurl

Answer 3

您是否尝试过将 loadSelect2 功能从 watch 移动到 methods？据我所知，手表是用来听的一个道具。如果父组件有数据更新，则观看道具。

所以它会是这样的：

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

           // the rest of the code

        }

Vue 组件未加载使用的值

Vue Component not loading value used

jquery-select2

vue.js