Блог

Главная - Вопросы по программированию - Рендеринг компонентов Vue 3 не работает в сценарии Google Apps

Рендеринг компонентов Vue 3 не работает в сценарии Google Apps

#javascript #vue.js #google-apps-script #vuejs2 #vuejs3

Вопрос:

Я начинаю с Vue и Vue 3, кодирующих приложение в сценарии Google Apps.

Я следую учебникам по мастерству Vue, а также нашел этот удивительный пример @brucemcpherson приложения Vue 2, работающего на газе, но слишком сложного для меня, чтобы понять некоторые части.

https://ramblings.mcpher.com/vuejs-apps-script-add-ons/

GitHub: https://github.com/brucemcpherson/bmVuetemplate

Каким-то образом с ГАЗОМ и Vue, работающими с компонентами, что-то не так, и мне нужна помощь.

Это мои файлы:

index.html

 <!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="app">
      <h1>{{ product }}</h1>
      </my-component></my-component>
    </div>
    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
    <?!= include("main-js"); ?>
    <?!= include("my-component"); ?>
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

utils.gs

 function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

main-js.html

 <script>
  const app = Vue.createApp({
      data() {
          return {
              product: 'Socks'
          }
      }
  })
</script>

my-component.html

 <script>
  app.component('my-component', {
    template: `<div>My component content</div>`,
    data() {
          return {
              product: 'Boots'
          }
      }
  })
</script>

Я получаю предупреждение на консоли:

 dropping postMessage.. was from host https://script.google.com but expected host https://n-jogxx7ovu3afq6djr4pskwjsglfwozzlkf5baay-0lu-script.googleusercontent.com

В обоих случаях ничего не происходит: я не вижу свой компонент, когда index.html заряжен.

У вас есть какие-либо идеи о том, в чем может быть проблема? Спасибо!

Ответ №1:

Сначала вы должны запустить vue, а затем смонтировать приложение. Не уверен, что это была ваша проблема, но вот рабочий код. Кроме того, я импортировал библиотеку vue в https://codepen.io/tzknc/pen/PopbOWW

 <div id="app">
  <h1>{{ product }}</h1>
  <my-component/>
</div>

<script>
  // create the vue instance 
  const app = Vue.createApp({
    data() {
      return {
        product: 'Socks',
      }
    }
  });
  // add the component 
  app.component('my-component', {
    template: `
    <div>
      My component content | {{product}}
    </div>`,
    data() {
          return {
              product: 'Boots'
          }
      }
  })
  // mount it 
  const mountedApp = app.mount('#app')
</script>

Комментарии:

1. Спасибо за ваш скорый ответ, @tzknc. Я не уверен, в чем была проблема, но ваш код работает как заклинание в сценарии Google Apps. Мой реальный случай включает импорт Vuetify, но я не могу включить css Vuetify с успехом, используя Vue на газе. Потому что это швы, которые включают теги <ссылка> на <ссылка><голова>, это не работает для меня… Но, может быть, это должен быть второй вопрос. Спасибо!

2. Я просто читаю, что Vuetify 2x не совместим с Vue 3…

Метки: