Я пытаюсь добавить один из этих классных 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 # Я добавил пользовательский виджет, форму и тоже добавил свой шаблон метод рендеринга. Я почти уверен, что именно здесь я потерялся.
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 в наборы полей администратора и из них. Шаблоны html и change_form. html, но это, казалось, делало страницу потерянной областью элементов, потому что я получил бы "значение" не определенным ошибки в консоли браузера. Странно то, что Я достаточно хорошо сработал с вкладками bootstrap - vue, изменив разделители на Vue.