0

I Have 2 Component. 1 Is Component Form as a parent, 1 another is 3 textarea and input. But when i submit form method post, the validation from laravel send result error, if reward_type.product, reward_type.price, reward_type[caption_note] is null.

This is my child component :

<template>
    <div>
      <div>
        <label>Product Name</label>
        <textarea id="reward_type.product" name="reward_type[product]" v-model="reward_type_product" placeholder="Type product name here" required></textarea>
      </div>
      <div>
        <label>Product Value</label>
        <input type="number" id="reward_type.price" min="0" name="reward_type[price]" v-model="reward_type_price" required />
      </div>
      <div>
        <label>Product Name</label>
        <textarea id="participants-note" name="reward_type[caption_note]" v-model="reward_type_caption_note" placeholder="Type note here" :required="isEditMode"></textarea>
      </div>
    </div>
</template>

    <script>
      export default {
        name: 'reward-type',
        props: {
          type: {
            type: String,
            required: false,
            default: ''
          },
          value: {
            type: Object,
            required: true
          }
        },
        data() {
          return {
            reward_type_product: this.value.product,
            reward_type_price: this.value.price,
            reward_type_caption_note: this.value.caption_note,
          }
        },
      }
    </script>

And this is parent form component :

<template>
    <div>
      <form action="/dummy" method="post" @submit.prevent="submitCampaign">
        <overview-reward-type v-model="campaign.reward_type"></overview-reward-type>
      </form>
    </div>
</template>

    <script>
      import OverviewRewardType from '../../../../../assets/js/brand/campaign/components/OverviewRewardType.vue'

      export default {
        name: 'CampaignCreatePage',
        props: {
          type: {
            type: String,
            required: false,
            default: ''
          },
          value: {
            type: Object,
            required: true
          }
        },
        components: {
          OverviewRewardType
        },
        data() {
          return {
            campaign: this.$inertia.form({
              reward_type: {
                'type' : 'product_barter',
                'product' : '',
                'price' : '',
                'caption_note' : '',
              },
            })
          }
        },
        methods: {
          async submitCampaign() {
              console.log("On Submit Campaign")

              this.campaign.transform((data) => ({
                  ...data,
                  remember: true,
                  _token: this.$page.props.app.csrf_token

              }))
              .post(this.route('brand.campaigns.store'))

            }
          },
      }
    </script>

This is screenshot from network when i submit form enter image description here

And this is callback/response from validation laravel enter image description here

I need the solution for v-model from parent to child

Zulkifli Raihan
  • 3
  • 2
  • That is not valid vue SFC component code (where are the template tags?). Please post the actual console messages instead of images (you can right-click on the message and click "Copy object"; paste it and format it as a code block with a language label of 'javascript'). – Darryl Noakes Dec 19 '22 at 23:01
  • I'm going to be blunt, as it is easier to get points and info across clearly than if it is all dressed up. It's not plain rudeness :). – Darryl Noakes Dec 19 '22 at 23:03
  • Can this code be simplified? Can you make a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)? You asked simply `v-model`. If all the code is actually needed (full-on forms, APIs, etc.), please add more details to your question to clarify what is actually not working and what you actually need, – Darryl Noakes Dec 19 '22 at 23:06

0 Answers0