Vue.js + AJAX Kurzwahl

Ich weiß, dass diese Frage schon einmal gestellt wurde, aber ich kann keine substanzielle Antwort für meinen speziellen Anwendungsfall finden.

Überblick

Ich habe an der Entwicklung einer WordPress-basierten Website mit der REST-API und Vue.js als Front-End-Framework gearbeitet. Ich habe keine Probleme, Posts zu erhalten, Daten anzuzeigen usw.

Problem

Da Vue.js auf der Client-Seite läuft, habe ich einige Probleme, wenn ich mit Plugins / Shortcodes arbeite, die serverseitig innerhalb des PHP gerendert werden müssen. Ich suche nach einer Lösung, um einen Shortcode in einer PHP-function zu rendern und die gerenderten Daten an mein Frontend zu senden, um sie schließlich mit Vue.js anzuzeigen.

JS

var http = new XMLHttpRequest(); var url = '/wp-admin/admin-ajax.php'; var data = { action: 'my_ajax_shortcode' }; http.open('POST', url, true); http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); http.onreadystatechange = function() { if (http.readyState == 4 && http.status == 200) { // response...... } }; http.send(data); 

PHP

 add_action('wp_ajax_my_ajax_shortcode', 'my_ajax_shortcode()'); add_action('wp_ajax_nopriv_my_ajax_shortcode', 'my_ajax_shortcode()'); function my_ajax_shortcode() { echo do_shortcode('[contact-form-7 id="98" title="Contact Test"]'); die; } 

Ergebnisse

Ich bin nicht sehr vertraut mit der Ajax-Kommunikation im Kontext von WordPress, also kann mir vielleicht jemand helfen oder mir eine Richtung geben. Meine Antworten protokollieren normalerweise ‘0’, wenn ich diesen Code ausführe. Obwohl ich in diesem Beispiel Kontaktformular 7 verwende, versuche ich nur den allgemeinen Ablauf dieser Operation zu erfassen, damit ich sie auf andere Fälle anwenden kann.

Vielen Dank! Jede Hilfe oder Hinweise wären hilfreich, um mir zu helfen, dieses Problem zu verstehen.

Solutions Collecting From Web of "Vue.js + AJAX Kurzwahl"

Meine Lösung war einfacher als ich dachte ….

Da ich gerade versuche, Shortcodes im Frontend auszuführen, kann ich das Skript einfach lokalisieren und die Shortcodes als Variablen übergeben:

functionen.php

 wp_localize_script( 'BUILD-script', 'sharedData', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'mailchimpForm' => do_shortcode('[mc4wp_form id="100"]'), 'contactForm' => do_shortcode('[contact-form-7 id="98" title="Contact form 1"]') ) ); 

Grundsätzlich bin ich Jus die Zuordnung der Shortcodes zu zwei Variablen und stellen Sie sie in meinem Haupt-js Bundle.

build.js

So kann ich nun auf die in meinen Komponenten gerenderten Shortcodes zugreifen.

 export default { name: 'my-component', data() { return { mailchimp: '', contact: '' }; }, mounted() { this.mailchimp = sharedData.mailchimpForm; this.contact = sharedData.contactForm; } }; 

Und mit der Vue v-html-Direktive gerendert:

 

Hoffentlich wird das jemandem helfen!