Quiero publicar datos json de Vue a php, pero estoy luchando por encontrar una manera de pasar los datos de valor de entrada del componente Vue al elemento raíz. Cuando llamo al método submitProduct, el mensaje de alerta simplemente me da 'indefinido'. Tuve que eliminar mi código original debido a esa estúpida política de saldo posterior. ¿Qué pasa aquí?
var productForm = Vue.createApp ({ methods:{ submitProduct: function(){ alert(JSON.stringify(productForm.product)) this.postData(productForm.product) }, postData: function(p){ fetch('mysql_postdata.php', { method: 'POST', mode: "same-origin", credentials: "same-origin", headers: { "Content-Type": "application/json" }, body: JSON.stringify({p:p}) //body: 'd='+d }) } } }) productForm.component('custom-form', { props: ["value"], template: ` <label>SKU<input type="text" :value=this.product.sku></label> <label>Name<input type="text" :value=this.product.name></label> <label>Price<input type="text" :value=this.product.price></label> ` , data: function() { return { product: { sku: 0, name: 'asdf', price: 0 }, options: ['Size', 'Weight', 'Dimensions'], selected: 'Size' } } }) productForm.component('status-bar', { props: ['info'], template: '<p>{{ selected }}</p>' }) const vm = productForm.mount('#product_form')El estado del product pertenece al componente custom-form , por lo que la aplicación raíz no puede acceder al estado.
Si intenta crear un formulario y obtener la entrada del formulario, debe hacer 1 de esto:
custom-form y vincule un evento para escuchar los documentos de cambio de estado aquí . (solo haga esto si el componente custom-form no está en el fondo del árbol de componentes)En primer lugar, después de 3,5 días de luchar para tratar de entender Vue, obtuve un resultado exitoso probado. ¡Quiero agradecerle a usted y a cualquier otra persona que me ayudó a comprender los principios básicos de Vue! :) Por favor vea el enlace de abajo...
https://jsfiddle.net/e2mnh4xa/
PD ¡Y sí! Tienes razón acerca de reorganizar la etiqueta 'formulario personalizado'. :)
código HTML:
<div id="product_form" v-cloak> <custom-form> </custom-form> </div>codigo js:
var productForm = Vue.createApp ({}) productForm.component('custom-form', { props: { modelValue: { type: String, default: '' }, }, components: ['status-bar'], template: ` <button v-on:click="submitProduct">Save</button> <label>SKU<input type="text" v-model="this.product.sku"></label> <label>Name<input type="text" v-model="this.product.name"></label> <label>Price<input type="text" v-model="this.product.price"></label> ` , data: function() { return { product: { sku: 0, name: 'asdf', price: 0, }, options: ['Size', 'Weight', 'Dimensions'], selected: 'Size', outputData: '' } }, computed:{ model:{ get(){ return this.modelValue }, set(v){ this.$emit('update:modelValue',v)} } }, methods:{ submitProduct: function(){ alert (this.showData()); return this.postData(this.product) }, showData: function(){ console.log(this.product.sku) return JSON.stringify(this.product) } } }) const vm = productForm.mount('#product_form')