How to pass input value data from Vue component to root element

Question

I want to post json data from Vue to php, but I'm struggling to find a way to pass input value data from Vue component to root element. When I call method submitProduct, alert message simply gives me 'undefined'. I had to strip my original code because of that stupid post balance policy. What's wrong here?

  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')

tony19 · Accepted Answer · 2022-07-16 01:36:34Z

1

The product state belongs to the custom-form component so the root app cannot access the state.

If you trying to create a form and get the input from the form, you need to do 1 of this:

Lift the state to the root and pass down the custom-form and bind an event to listen to the state change docs here. (only do this if the custom-form component is not deep down in the component tree)
Using the state management store like Vuex to share the state within the app (in case the child component is deep down in the tree you have to pass the state down so many levels, using store management will solve that). docs here. If your app is really small consider the provide/inject API.
Another choice is using the provide/inject API (similar to the context provider in react).

edited Jul 16, 2022 at 1:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 23, 2021 at 11:34

Andy Nguyen

1,0431 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

v01d · Accepted Answer · 2021-10-26 06:58:48Z

First of all after 3.5 days of struggling to try to understand Vue I came with tested successfull result. I want to thank you and anybody else, who helped me to understand basics principles in Vue! :) Please see link below...

https://jsfiddle.net/e2mnh4xa/

P.S. And yes! You are right about rearranging 'custom-form' tag. :)

html code:

<div id="product_form" v-cloak>
   <custom-form>
                
   </custom-form>
</div>

js code:

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')

Collectives™ on Stack Overflow

How to pass input value data from Vue component to root element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related