Nuxt 2 (vuejs) ストアからモードをアクティブ化する
<p>vuex ストアからモーダル コンポーネントをアクティブ化する必要があります。結果 API が成功したら、「this.$refs['modalSuccess'].show()」を使用してコンポーネント内のモーダルを表示します。 </p>
<p>ただし、関数「sendLeadResponse」をメソッド（コンポーネント）からオペレーション（ストレージ）に変更する必要があります。その後、この 'this.$refs['modalSuccess'].show()' を使用してモーダルをアクティブ化できなくなります。 </p>
<p>ストアから電話をかける方法はありますか？ </p>
<p>これがプロセスです:</p>
<ol>
<li>ボタン: コンポーネント内のメソッドをアクティブ化します;</li>
<li>メソッド: ストアからアクションをアクティブ化します;</li>
<li>操作: 外部 API を使用します; </li>
<li>モーダル: 結果が正常であれば、コンポーネント内のモーダルがアクティブになります;</li>
</ol>
<p><strong>ボタンとモーダルを含むコンポーネント</strong></p>
<pre class="brush:php;toolbar:false;"><テンプレート>
<セクション>
<div class="w-100 d-md-flex justify-content-md-end">
<小さいボタン
smallButtonText="お客様の質問 →"
@event="createLeadObject()"
id="show-btn"
/>
</div>
<b-モーダル
ref="modalSuccess"
OKのみ
> Obrigado pelo interesse! Em breve entraremos em contato.
</b-modal>
</div>
</セクション>
</テンプレート>
<スクリプト>
SmallButton を '../SmallButton.vue' からインポートします
デフォルトのエクスポート {
名前: 'BeClientForm'、
コンポーネント: {
小さなボタン
}、
メソッド: {
createLeadObject(){
const dataLeadObject = {
日付: new Date()、
フルネーム: this.lead.name、
電子メール: this.lead.email、
電話: this.lead.phone、
コメント: this.lead.comment
}
this.$store.dispatch('sendLeadResponse', dataLeadObject)
}、
}
}
</script></pre>
<p><strong>店舗運営</strong></p>
<pre class="brush:php;toolbar:false;">アクション: {
async sendLeadResponse({commit}, dataLeadObject){
const jsonDataObject = JSON.stringify(dataLeadObject)
await fetch("http://localhost:5000/api/lead/leadResponse", {
メソッド: "POST"、
ヘッダー: {"Content-type": "application/json"}、
本体: jsonDataObject
})
.then((resp) => resp.json())
.then((データ) => {
if (データ.エラー) {
commit('MESSAGE_RESPONSE', data.error)
}
それ以外 {
commit('RESET_LEAD_RESPONSE')
!!!!!!!!!!!! this.$refs['modalSuccess'].show() !!!!!!!!!!!!!!! [動作しません)
}
})
}、
}</pre></p>
