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

Question

我收到错误“属性或方法“processForm”未在实例上定义，但在渲染期间被引用”和错误“TypeError：_vm.processForm 不是函数”。我通过在我的联系表单中调用 processForm 函数@submit.prevent="processForm"。从这一点开始，我不确定该怎么做。任何帮助表示赞赏。

渲染.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>`
})

还有我的表单模板：

<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>

标签： javascriptvue.js