Разбрызгивание VueJs компонентов в Django шаблоны - PullRequest
Новая
       4

Разбрызгивание VueJs компонентов в Django шаблоны

0 голосов
/ 10 апреля 2020

Я работаю над сайтом Django и пытаюсь "посыпать" в некоторых Vue компонентах шаблоны Django. Я работаю в одном репозитории и у меня есть настройки веб-пакетов для создания пакетов стиля / js, которые я использую в шаблонах Django.

Я изо всех сил пытаюсь заставить функционал работать так, как мне хочется в основном это касается компонентов без рендеринга Vue, так как я хочу обработать все (или, по крайней мере, подавляющее большинство) html в шаблонах Django и просто использовать компоненты Vue для некоторых логик c в некоторых местах .

Я пользуюсь некоторыми советами из здесь , но это не совсем сработало, как они и предлагали (хотя я надеюсь, что это сработает), и я я чувствую, что мне нужно воспользоваться преимуществами scoped-slots.

Я использую дистрибутив Vue esm для включения компилятора Vue.

Настройка, которую я сейчас использую: следующие: 

// webpack_entrypoint.js
import Vue from "vue";
import RenderlessComponent from "./components/RenderlessComponent.vue"

// I will also be registering additional components here in future for other pages
// and I'm under the impression that doing it this way allows me to reuse the Vue instance
// defined below
Vue.component("renderless-component", RenderlessComponent)

new Vue({
    el: "#app"
})

// components/RenderlessComponent.vue
<template></template>
<script>
// Other 3rd party components to use in the template
import Autocomplete from "@trevoreyre/autocomplete-vue";  

export default {
    components: {
        Autocomplete
    },
    data() {
        return {
            modalOpen: false
            someValue: ""
        }
    },
    methods: {
        toggleModal() {
            this.modalOpen = !this.modalOpen
        }
    },
    computed: {
        selectedValue() {
            // use refs defined in the Django template
            return this.$refs.autocomplete.value + '/extra/stuff'
        }
    }
}
</script>

<!-- templates/some_django_template.html -->
<!-- import js bundle etc -->

<div id="app">
    <renderless-component>
        <h1>I want to be able to use {{someValue}} here</h1>
        <div>
            Lots of other markup within this component
            As well as using other components defined in RenderlessComponent

            //also want to be able to use refs
            <autocomplete ref="autocomplete"></autocomplete>
        </div>
        <button @click="toggleModal">
        <div v-if="modalOpen">
            Some modal content
        </div>
    </renderless-component>
    <p>
        Other content outside of the component
    </p>
</div>

Проблемы

Мне не удается получить доступ к каким-либо значениям данных, методам, вычисленным свойствам, определенным в компоненте Vue, изнутри шаблон Django. Я вроде как получил эту работу, определив функцию render внутри компонента, который возвратил this.$scopedSlots.default({...allOfTheThingsINeed}), а затем добавив оболочку <template v-slot="slotProps"> вокруг всей разметки внутри <renderless-component>, но это кажется неудобным из-за необходимости доступа ко многим значений данных и методов и необходимости переопределять их в функции render. Есть ли способ обойти это?

Я также не могу получить доступ к $refs, определенному для элементов в шаблоне Django. Они все undefined, что касается Vue, так что я не уверен, что мне там не хватает.

Это основные проблемы, с которыми я сталкиваюсь в этой конфигурации на момент. По сути, я хочу иметь возможность писать Vue файлов компонентов без каких-либо шаблонов, вместо этого записывать разметку шаблона в мои Django шаблоны вместо этого и иметь загрузку Vue при загрузке страницы и получить контроль.

Буду очень признателен за любую помощь, которую может предложить каждый.

1 Ответ

0 голосов
/ 22 апреля 2020

если вы хотите использовать someValue внутри vue компонента, вы должны передать значение реквизитом, вы можете посмотреть на этот репо django - vue

шаблон индекса. html вы можете видеть, как msg0 и msg1 переходят в vue компонент

index. js

строка {% render_bundle 'index' %} должна включать скомпилированный индекс. js, определенный здесь

...