Vue реквизиты не определены при динамической печати компонента - PullRequest
Новая
       79

Vue реквизиты не определены при динамической печати компонента

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

Моя проблема заключается в динамическом создании TAG "galeriaimages". Vue работает нормально, но реквизит всегда неопределен

спасибо за все.

main. js

import Vue from 'vue'
import Gi from './components/galeriaimages.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', function() {
    new Vue({vuetify, render: h => h(Gi) }).$mount('galeriaimages');
});

HTML

<galeriaimages p1="awesome" /> <!-- I create it dinamically-->

Vue компонент 

<script>

export default {
    props: ['p1'] ,
    data: function() {
        return {
        }
    },
    created: function() {
        alert(this.p1); //this is always undefined
    }
}

Спасибо @skirtle за ответ: -)

Я добавил эту строку в свой vue .config. js

runtimeCompiler: true

... и все отлично работает

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Бит, в котором вы пишете h(Gi), создает компонент galeriaimages, но не передает ему какие-либо реквизиты.

Чтобы передать реквизит, вам нужно написать: 

new Vue({
  vuetify,
  render: h => h(Gi, {props: {p1: 'awesome'}})
}).$mount('galeriaimages');

Однако я подозреваю, что это не то, что вы действительно пытаетесь сделать.

В настоящее время вы, кажется, монтируетесь непосредственно к элементу <galeriaimages>, что немного странно, но если вы удалите render Функция должна работать. Вы также можете использовать el вместо $mount: 

new Vue({
  vuetify,
  components: {galeriaimages: Gi},
  el: 'galeriaimages'
});

Я бы добавил, что большинство примеров используют функцию render для экземпляра root Vue в том, что она избегает необходимо включить компилятор шаблона в сборку Vue. Это работает только в том случае, если все остальные компоненты Vue представляют собой предварительно созданные файлы .vue. Если у вас есть какие-либо шаблоны во время выполнения, в том числе в вашем HTML, то вам все равно нужно будет включить компилятор шаблонов. В этом сценарии нет смысла использовать функцию render в экземпляре root.

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

Необходимо указать компонент, соответствующий тегу <galeriaimages>. Ваша пользовательская функция рендеринга переопределяет синтаксический анализ шаблона, поэтому она не анализирует <galeriaimages> как тег компонента. 

    new Vue({vuetify, components: {galeriaimages: Gi} }).$mount('galeriaimages');

Также ваши компоненты не создают никаких элементов. Они не умеют монтировать.

...