Question

Sketchup使用html作为其扩展用户界面。我正在尝试与vue.js + vuetify建立接口。 Sketchup可以呈现页面，但是我无法将数据发送到javascript。 Sketchup通过调用函数并传递数据将数据发送到javascript。

Vue.js在挂载时调用动作回调。然后，Sketchup执行函数updateUI（data）。这时，该接口引发错误：Uncaught ReferenceError：未定义updateUI 在index.html：1

这是我的main.js文件，其中初始化了Vue并声明了updateUI函数。

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import shared_data from './stores/shared_data';

function updateUI(data){
  shared_data.data.parameters = data.parameters;
}

Vue.config.productionTip = false

var gui = new Vue({
  render: h => h(App),
}).$mount('#app')

这是webpack之后的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">
      <link rel=icon href=/favicon.ico>
      <title>my-app</title>
      <link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
      <link rel=stylesheet href="https://fonts.googleapis.com/css?family=Material+Icons">
      <link href=C:/Users/**/my-app/dist/css/chunk-vendors.0c9ceaf8.css rel=preload as=style>
      <link href=C:/Users/**/my-app/dist/js/app.6b29f88e.js rel=preload as=script>
      <link href=C:/Users/**/my-app/dist/js/chunk-vendors.a37f46e5.js rel=preload as=script>
      <link href=C:/Users/**/my-app/dist/css/chunk-vendors.0c9ceaf8.css rel=stylesheet>
   </head>
   <body>
      <noscript><strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
      <div id=app></div>
      <script src=C:/Users/**/my-app/dist/js/chunk-vendors.a37f46e5.js></script>
      <script src=C:/Users/**/my-app/dist/js/app.6b29f88e.js></script>
   </body>
</html>

Answer 1

尝试将要调用的函数添加到Window对象，确保它保持全局函数，并且在构建JS时不会被包裹在匿名模块中。

window.updateUI = function(data){
  shared_data.data.parameters = data.parameters;
}

您还可以在此github存储库中示例完整的示例集：https://github.com/SketchUp/htmldialog-examples（示例4引入了Vue。）

草图的Vue.js界面

1 个答案: