我已经在我的应用程序中设置了一个vue组件，该vue组件是一个联系表单，将其导入到标头组件中，并包装在一个模式内部。
此联系表必须提交一条确认消息，并且一旦该信息将最终发送电子邮件到receive@email.com。
问题：如何在vuejs中触发一个事件，当触发此按钮时，将显示一个带有确认信息的新HTML块？我和我的搭档都在这里有使用Jquery的经验，我正在Vuejs中寻找相同的结果：https://codepen.io/anon/pen/WLJwxo?editors=1010
出于实用性考虑，我们已经在Vue Storefront上建立了https://logima.io（由于我们从事为客户建立网上商店的业务，因此我们希望深入了解并创造更多突破性的成果）
您可以点击“获取您的应用！”导航栏右上角的按钮。
通过API使Vue店面联系表与Magento联系表连接的最佳方法/做法是什么？
由于Vue店面通过其API充当Magento的外壳，从理论上讲，应该可以在Magento上设置表单，配置API并在Vue APP和Magento之间建立桥梁，这样您就不必不需要直接为您的Storefront所在的实例设置SMTP或其他内容。
更清楚：
用户在logima.io上填写联系表单> API连接到Magento上的电子邮件表单> Magento表单已填写>将电子邮件发送到接收地址。
这已经适用于产品和订单。我们已经使用Magento外部结帐在Vue店面中建立了几家商店，并且该API运作完美。我只是想知道如何实际修改或创建新的代码字符串，以便Shell联系人表单可以通过现有API填写Magento表单。
public class BuzzTest {
@Tested BuzzData buzzData;
@Tested Buzz buzz;
@Injectable String a = "field";
@Test public void doTest(@Injectable("parameter") String a) {
assertEquals("parameter", buzz.getBuzData().getA()); //fails
}
}
<div id="app">
<form class="vue-form" @submit.prevent="submit">
<div class="error-message">
<p v-show="!email.valid">Oh, please enter a valid email address.</p>
</div>
<fieldset>
<legend>
<b>
We will build you a fast PWA, just let us know your details
</b>
</legend>
<GetBackToYou/>
<div>
<label class="label" for="name">Name</label>
<input type="text" name="name" id="name" required="" v-model="name">
</div>
<div>
<label class="label" for="email">Email</label>
<input type="email" name="email" id="email" required=""
:class="{ email , error: !email.valid }"
v-model="email.value">
</div>
<div>
<h4>Your budget</h4>
<p class="select">
<select class="budget" v-model="selection.member">
<option value="0">$1500 > $4500</option>
<option value="0">$4500 > $10.000</option>
<option value="0">$10.000 > $20.000</option>
<option value="0">$20.000 > $50.000</option>
</select>
</p>
</div>
<div>
<h4>Select your package</h4>
<ul class="vue-form-list">
<li>
<input type="radio" name="radio-1" id="radio-1" value="angular"
v-model="selection.framework">
<label for="radio-1">PWA for Proprietor</label>
</li>
<li>
<input type="radio" name="radio-2" id="radio-2" value="react"
v-model="selection.framework">
<label for="radio-2">PWA for Business</label>
</li>
<li>
<input type="radio" name="radio-3" id="radio-3" value="vue"
v-model="selection.framework">
<label for="radio-3">PWA for LLC</label>
</li>
<li>
<input type="radio" name="radio-3" id="radio-3" value="vue"
v-model="selection.framework">
<label for="radio-3">PWA for INC</label>
</li>
</ul>
</div>
<div>
<h4>Features</h4>
<ul class="vue-form-list">
<li v-for="(feature, index) in features">
<input type="checkbox"
:value="feature"
:id="'cb-feature-'+index"
v-model="selection.features">
<label :for="'cb-feature-'+index">{{feature}}</label>
</li>
<li>
<input type="checkbox" id="checkbox-all" @click="checkAll">
<label for="checkbox-all">Check All</label>
</li>
</ul>
</div>
<div>
<label class="label" for="textarea">Message with Counter</label>
<textarea class="message" name="textarea" id="textarea" required=""
v-model="message.text"
:maxlength="message.maxlength"></textarea>
<span class="counter">{{ message.text.length }} / {{ message.maxlength }}</span>
</div>
<div>
<input type="submit" value="Send Form">
</div>
</fieldset>
</form>
<div class="debug">
<pre><code>{{ $data }}</code></pre>
</div>
</div>
</template>
答案 0 :(得分：0)
这应该是两个问题，而不是一个问题。但是由于我了解Magento以及VueSF的工作原理，所以我可以为要点2提供帮助：
magento联系人表单没有API终结点，并且执行此操作的方法很少：