0

尝试在我的 Vue.js 应用程序上实现 Mailchimp 时我完全迷失了。目标是构建一个简单的电子邮件注册表单。

使用 Mailchimp，我能够生成以下代码：

<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://pm.us1.list-manage.com/subscribe/post?u=xxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
<div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
    <div id="mce-responses" class="clear">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_5119408c70596654ef4da6c1a_987baf3d10" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

导致：在此处输入图像描述 这按预期工作，但它缺乏任何风格。我正在使用具有样式组件的碳设计系统。但是我不确定如何将 HTML 代码中的功能添加到样式化的组件中。

<template>
  <div>
    <cv-form @submit.prevent="functie1">
      <cv-text-input
        label="Example text label"
        helper-text="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
        placeholder="Optional placeholder text"
      >
      </cv-text-input>
      <cv-button>Submit</cv-button>
    </cv-form>
  </div>
</template>

<script>
export default {
  name: "SignupForm",
  methods: {
    functie1: function() {
      console.log("add email to userlist");
    }
  }
};
</script>

导致在此处输入图像描述. 我没有得到的是我是否应该使用另一个库（如 Axios）或请求向 Mailchimp 发出 POST 请求。欢迎任何帮助。

4

0 回答 0