使用bootstrap-vue 作为自定义Django管理窗口小部件

Question

我正在尝试将其中一种很酷的bootstrap-vue tag inputs添加到我的Django管理页面中，但是我很难使它正确呈现。不幸的是，我的定制很多，可能会干扰模板的渲染，但我觉得我并没有做任何不寻常的事情。如：

admin.py

# I added custom models form reference and added all the required files to my Meta class
class IngredientAdmin(models.ModelAdmin):
    form = IngredientListForm
    model = IngredientList
    class Media:
        js = [
            'tagwidget/js/polyfill.min.js',
            'tagwidget/js/vue.min.js',
            'tagwidget/js/bootstrap-vue.min.js'
        ]   
        css = {'all':(
            'tagwidget/css/tabbed_admin.css',
            'tagwidget/css/bootstrap.min.css',
            'tagwidget/css/bootstrap-vue.min.css',
            )
        }

forms.py＃我添加了自定义窗口小部件，表单，还添加了我的模板的render方法。可以肯定，这就是我迷路的地方。

class TagWidget(forms.Widget):
    template_name = 'admin/chemicals/includes/tag_widget.html'

    def render(self, name, value, attrs=None, renderer=None):
        context = self.get_context(name, value, attrs)
        template = loader.get_template(self.template_name).render(context)
        return mark_safe(template)

class IngredientListForm(forms.ModelForm):

    class Meta:
        model = IngredientList
        widgets = {
            'cas_number': TagWidget(),
        }
        fields = '__all__'

然后是我的tag_widget.html模板，该模板将字段显示为空白

<div id="tagwidget">
  <template>
    <b-form-tags v-model="value" no-outer-focus class="mb-2">
    </b-form-tags>
    </template>
  </div>
<script>
  Vue.config.devtools = true
  var tagwidget = new Vue({
    delimiters: ['[[', ']]'],
    el: '#tagwidget',
    data() {
      return {
              value:['TEST']
            }
    },
    methods: {}
    });
</script>

我在树林里有些失落。我已经尝试过将Vue组件移入和移出adminsfieldsets.html和change_form.html模板的操作，但这似乎使页面失去了元素范围，因为在浏览器控制台中我会得到“值”未定义的错误。奇怪的是，通过更改Vue的分隔符，I got this to work与bootstrap-vue选项卡相当好。

Answer 1

所以，由于我还是vue-bootstrap和vue的新手，所以我发现我丢失了一个文件，该文件从未正确地复制到我的静态目录中……我是正确的。

有两个不同的settings.py文件，分别是开发版和正式版。两者之间的唯一主要区别是Debug = True和加载django-debug-toolbar。检查两个设置之间的静态文件，我完全忘记了在生产环境中Django会尝试首先查找.min.js和min.css文件，我想呢？出于生产中的任何原因，我收到了一个浏览器控制台警告，提示它找不到bootstrap-vue.min.js.map。我当前正在使用vue-bootstrap 2.6.1，因此请重新下载新2.7.0的所有文件，包括.map文件和BOOM！花式标签小部件！

对于任何想知道我最终将其标签从widget.html页面删除并将其添加到我的所有静态文件中的管理模型Meta类中的人来说，它都能正常工作。

class Media:
        js = [
            "tabbed_admin/js/polyfill.min.js",
            "tabbed_admin/js/vue.min.js",
            "tabbed_admin/js/bootstrap-vue.min.js",
            "tabbed_admin/js/bootstrap-vue.min.js.map"
            "tabbed_admin/js/boostrap-vue-tag.js"
        ]   
        css = {'all':(
            'tabbed_admin/css/bootstrap.min.css',
            'tabbed_admin/css/bootstrap-vue.min.css',
            )
        }