Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

nhayder's avatar
Level 13

v-model not working with hidden fields

On my app i have difficulties when i attempt to bind a hidden input element with value passed from prop (serviceID), The form should post comment to comments DB but it requires a serviceID that i'm passing as prop.

To complete this component i need to bind (or v-model) the serviceID value to the hidden input (link_id) and at the same time i need to be able to include the binded data to laravel comments.store function.

<form @submit.prevent="form.post(endpoint), {
          preserveScroll: true, 
          onSuccess: () => form.reset(),
          forceFormData: true,
          _method: 'put',
        }">

            <input v-model="form.link_id" type="number" name="link_id">
            <label for="comment" class="sr-only">About</label>
            <textarea v-model="form.description" id="comment" name="comment" rows="5" required></textarea>

            <Button :type="'submit'" :disabled="form.processing">Post</Button>

</form>

<script>
export default {
  components: {
    // ....
  },
  props:{
    errors       : Object,
    endpoint     : String,
    serviceID   : Number,
  },
  setup () {
    const form = useForm({
      link_id : null, // this should be like this.serviceID
      description : null,
    })
    return { form }
  },
  methods:{
    active(active){
      if(active){
          return 'z-10 bg-corn-50';
        }
    },
  }
}
</script>

Not sure how to bind a prop value with a from input field in the form object in the setup function any ideas ???

0 likes
2 replies

Please or to participate in this conversation.