Question

我正在尝试将自定义JavaScript（草绘器）插入到Vue组件中，但到目前为止还没有运气。当我尝试将javascript直接插入到这样的模板中时：

<template>
    <div id="sketcher">
        var sketcher = new ChemDoodle.SketcherCanvas('sketcher', 400, 300);
    </div>
</template>

我收到错误：＆＃34;模板应该只负责将状态映射到UI。避免在模板中放置带副作用的标签，例如，因为它们不会被解析。＆＃34; 我的另一个尝试是在不同的.js文件中创建一个组件并将其导入到Vue组件中。

sketcher.js：

export default ({
  mounted(){    
   return new ChemDoodle.SketcherCanvas('sketcher', 400, 300)
  }
})

Home.vue

<template>
    <div id="sketcher">
       <app-sketcher></app-sketcher>
    </div>
</template>

<script>
import sketcher from './sketcher';    
export default {
    components: {
    "app-sketcher": sketcher
    }
}
</script>

但是我收到了这个错误：＆＃34;无法安装组件：模板或渲染函数未定义＆＃34;。我非常感谢有关如何解决此问题或提出将javascript嵌入Vue组件的其他选项的任何建议。

Answer 1

您的第一条错误消息不言自明：您无法在单个文件Vue组件的<script>中添加<template>标记。

在第二个示例中，当您在app-sketcher文件中注册时，您没有为Home.vue组件定义模板。您的sketcher.js文件只导出mounted挂钩的定义，而不导出任何其他内容。

您可以制作Sketcher.vue文件：

<template>
  <div id="sketcher"></div>
</template>

<script>
export default {
  mounted() {    
    return new ChemDoodle.SketcherCanvas('sketcher', 400, 300)
  }
}
</script>

然后使用导入它并在Home.vue文件中使用它，如下所示：

<template>
  <app-sketcher/>
</template>

<script>
import AppSketcher from './Sketcher';    
export default {
  components: { AppSketcher }
}
</script>

如何将外部javascript插入Vue组件

1 个答案: