使用 bootstrap-vue <b-form-tags> 作为自定义 Django 管理员小部件

Question

我正试图将这些很酷的bootstrap vue标记输入添加到我的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#我添加了一个自定义小部件form，并添加了我的模板和渲染方法。我很确定这就是我迷路的地方。

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组件移入和移出admins fieldsets.html和change_form.html模板，但这似乎会使页面失去元素的范围，因为我会在浏览器控制台中得到未定义的"值"错误。奇怪的是，通过更改vue的分隔符，我可以很好地使用bootstrap vue选项卡。

Answer 1

因此，由于我对vue引导程序和vue总体上还是个新手，我想我在某个地方丢失了一个从未正确复制到静态目录中的文件。。。我是对的。

有两种不同的设置。py文件，开发和生产。两者之间唯一的主要区别是Debug=True，其中一个加载django调试工具栏。在检查两个设置之间的静态文件时，我完全忘记了在生产中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',
)
}