介绍
我在我的应用程序上设置了一个 vue-component，这个 vue-component 是一个联系表单，它被导入到 header 组件中，并包装在一个 modal 中。
此联系表格必须提交确认消息和事件，该信息将在最后发送电子邮件至接收@email.com。
问题 1
问题：如何在 vuejs 中触发一个事件，当触发此按钮时，会显示一个带有确认信息的新 HTML 块？我和我的伙伴在这里体验了 Jquery，我正在 Vuejs 中寻找相同的结果：https ://codepen.io/anon/pen/WLJwxo?editors=1010
出于实用性的原因，我们在 Vue Storefront 上设置了https://logima.io（由于我们从事为客户建立网上商店的业务，我们希望更深入并创造更多开创性的成果）
您可以点击“获取您的应用程序！” 导航右上角的按钮。
问题2
使 Vue 店面联系表通过 API 与 Magento 联系表连接的最佳方法/实践是什么？
由于 Vue-storefront 通过其 API 充当 Magento 的外壳，因此理论上应该可以在 Magento 上设置表单、配置 API 并在 Vue APP 和 Magento 之间架起一座桥梁，这样您就不需要直接为您的 Storefront 所在的实例设置 SMTP 或其他内容。
为了更清楚：
用户在 logima.io 上填写联系表单 > API 连接到 Magento 上的电子邮件表单 > Magento 表单已填写 > 向接收地址发送电子邮件。
这已经适用于产品和订单。我们已经使用 Magento 外部结账在 Vue 店面建立了几个商店，并且 API 运行良好。我只是想知道如何实际修改或创建新的代码字符串，以便 shell 联系表单可以通过现有 API 填写 Magento 表单。
HTML
<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>
脚本
export default {
data: function () {
return {
name: '',
email: {
value: '',
valid: true
},
features: ['Payment Gateway', 'Magento External Checkout', 'Logima Cloud Hosting', 'Google tracking', 'CSM extension', 'Other (Please specify in message)'],
selection: {
member: '0',
framework: 'vue',
features: []
},
message: {
text: ``,
maxlength: 1000
},
submitted: false
}
},
methods: {
// submit form handler
submit: function () {
this.submitted = true
},
// validate by type and value
validate: function (type, value) {
if (type === 'email') {
}
},
// check for valid email adress
isEmail: function (value) {
},
// check or uncheck all
checkAll: function (event) {
this.selection.features = event.target.checked ? this.features : []
}
},
watch: {
// watching nested property
'email.value': function (value) {
this.validate('email', value)
}
}
}