Vuejs Reactive интерполяция свойств не работает - PullRequest
Новая
       7

Vuejs Reactive интерполяция свойств не работает

0 голосов
/ 23 сентября 2018

Я столкнулся с проблемой, когда я создаю компоненты, которые затем применяются к корневому приложению - после создания динамического дочернего элемента с vanilla JS.Когда я смотрю на объект Vue в консоли, сообщение отсутствует, и я ожидаю, что это будет - кто-нибудь может сказать мне, почему?

  • Создание приложения
  • Динамическое добавление новогоЭлемент DOM w / createElement со свойством {{message}} (например: <div id="test">{{message}}</div>)
  • Создание пользовательского компонента с помощью Vue.Component (например: <custom-component><custom-component> с предварительно заполненным {{ messsage }})сообщение о проверке значений
  • Визуализация Vue с компонентом с обновлением значений для {{ message }}

Ниже приведен фактический проверенный код: 

import Vue from 'vue/dist/vue.js';
export default {
  name: 'app',
  components:
  {
    HelloWorld
  },
  data()
  {
    return this;
  },
  mounted()
  {

    // #2 Create an Html Target that contains the component's name 'custom-element'
    var v = document.createElement('div');
      v.setAttribute('id', 'test');
      v.innerHTML = '<custom-element></custom-element>';
    var $element = this.$el.prepend(v);

    // #1 Create a component
    var MyComponent = Vue.component(
      'custom-element',
      {
        template: '<div v-bind:id="UID">{{message}}</div>',
        prop: ['UUID', 'message'],
        data() {
          return {
            UID: '',
            message: 'test message',
          }
        },
      }
    );

    // #3 Append the component to the Html Target
    window.vm = new Vue({
        el: '#test',
        components: {
          'custom-component': MyComponent,
        },
        beforeCreate() {
          return {
            UID: 'x7x7x',
            message: 'test message update...'
          }
        },
    })

    window.console.log(MyComponent);
    window.console.log(this);
  }
}`

Вот основной index.html: 

`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>hello-world</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but hello-world doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>'

Вот main.js 

'use strict'

import Vue from 'vue'
import App from './App.vue'
import Reaktr from './js/reaktr.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  data: {
    Reaktr: new Reaktr(),
  },
  mounted() {

  }
}).$mount('#app')

Вот Helloworld.vue 

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
...