Javascript Vue.js-属性或方法未在实例上定义，但在渲染期间被引用

I'm getting error“属性或方法”processForm“未在实例上定义，但在呈现期间引用”和“错误”TypeError:\u vm.processForm不是函数”。我正在通过

@submit.prevent=“processForm”

调用联系人表单中的processForm函数。我不知道从现在开始该怎么办。谢谢你的帮助

render.js：

const mjml2html = require('mjml')
const Vue = require('vue')

const app = new Vue({
data: {
    el: '#signupform',
    name: ''
},
template: `
<mj-section>
 <mj-column>
   <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello {{ name }}</mj-text>
 </mj-column>
</mj-section>`,
methods: {
processForm: function() {
    renderer.renderToString(app).then(html => {
        const htmlWithoutDataServerRenderedAttribute = html.replace(`data-server-rendered="true"`,'')
        const plainHtml = mjml2html(htmlWithoutDataServerRenderedAttribute)
        console.log(plainHtml.html)
    })}}})

const renderer = require('vue-server-renderer').createRenderer({
template: `
<mjml>
 <mj-body>
  <!--vue-ssr-outlet-->
 </mj-body>
</mjml>`
})

const mjml2html=require（'mjml'）
常量Vue=require（'Vue'）
const app=新的Vue({
数据：{
el:“#报名表”，
名称：“”
},
模板：`
你好{{name}
`,
方法：{
processForm:function（）{
renderer.renderToString（app）.then（html=>{
const htmlWithoutDataServerRenderedAttribute=html.replace（`dataserver rendered=“true”`，'））
常量plainHtml=mjml2html（htmlWithoutDataServerRenderedAttribute）
log（plainHtml.html）
})}}})
const renderer=require（'vue-server-renderer'）。createRenderer({
模板：`
`
})

和我的表单模板：

<template>
   <div class="sign_up" id="signupform">
     <main role="main">
      <div class="SignUp_container">
      <form class="form-signup" @submit.prevent="processForm">
      <input type="text" name="name" placeholder="Enter First Name" required/>
      <input type="text" name="lname" placeholder="Enter Last Name" required/>
      <input type="email" name="mailaddr" placeholder="Your email address" required/>
      <div class="sign_cancel_buttons">
      <router-link to="/">
        <button id="canlbtn" type="cancel" class="clbtn">
          Cancel
        </button>
         </router-link> 
        <button id="signupbtn" type="submit" name="sendmsg-button" class="signbtn">
          Sign Up
        </button>
      </div>
    </form>
  </div>
</main>

取消
注册

您的根组件定义了一个

processForm

方法，该方法仅适用于其模板，但您试图在其他地方调用它。如果我将

processForm

方法和

const renderer

代码移动到表单模板中，我会收到一个错误“error:not find module'../lib/utils.js”，

processForm

必须与从中调用它的模板一起使用。由于

呈现程序

定义不是任何组件的一部分，请尝试将其与其他

require

语句一起放在顶部。即使你仍然得到错误，至少一切都会在正确的地方。我无法对其余部分发表评论，因为我从未尝试使用

vue server renderer

。是否有方法将表单数据从模板传递到render.js文件，并让render.js文件将

纯HTML

数据返回到我的模板？本质上，我想从模板中获取名称输入，将其提供给渲染文件，这样它就可以用用户输入替换{{name}}，然后将mjml代码转换为html，这样我就可以通过电子邮件发送它。可能最简单的方法是使用Vuex。将表单数据保存在存储中，然后从

render.js

访问存储数据。您还可以

$emit

将表单数据发送到根组件。