How to pass dynamic data from a blade file as a prop to a vue component?

Question

Inside my blade file -

<b-input-group class="mt-3 mb-3" size="sm">
    <b-form-input id="filterinput" placeholder="Filter" type="text" onInput="showCurrentValue(event)"></b-form-input>
</b-input-group>
<invoices-component title="a" forminput='value'>
</invoices-component>


<script>
    var value ='';
    function showCurrentValue(event)    { 
        value = event.target.value;      
        console.log(value)
    };     
 
    
</script>

Inside my vue component -

<template>
  <div class="my-5">
    <h2>Invoice inner</h2>
    <h2>{{title}}</h2>
    <h2>{{forminput}}</h2>   
  </div>
</template>

<script>
export default {
  props: ["title", "forminput"],
};
</script>

output in the browser-

In the blade template: I have a function that listens to the input field on key change (showCurrentvalue). How can I pass the input value as a prop?

In the vue component: The title value is passed (ie A), but forminput value is static.

How do I pass the value typed in the input field dynamically every time it changes?

Answer 1

You need to use the v-bind: attribute or the short syntax

Normal syntax

<invoices-component title="a" v-bind:forminput='value'>
</invoices-component>

Short syntax

<invoices-component title="a" :forminput='value'>
</invoices-component>

Or if you are passing values from a Laravel controller

# laravel controller
public function formView(param)
{
    $data = ["key" => "value", "key" => "value"];
    return view("my.view", $data);
}

<!-- blade file -->
<invoices-component title="a" :forminput='{{$data}}'>
</invoices-component>

Update

Even with the v-bind correction I don't think your code will work because the component can't get the value inside the script tag. What you can do, is wrapping the current content in a more Vue-way and pass props through components and not from a blade file. Using v-model on an input you don't need a function to update the value, it gets done from Vue automatically.

NewComponent.vue

<template>
    <b-input-group class="mt-3 mb-3" size="sm">
        <b-form-input id="filterinput" placeholder="Filter" type="text" 
    v-model="formInput"></b-form-input>
    </b-input-group>
    <invoices-component title="a" :forminput='formInput'>
    </invoices-component>
</template>

<script>
import InvoicesComponent from '......'

export default {
    components: {InvoicesComponent}
    data() {
        return {
            formInput: ''
        }
    }
}
</script>

Blade

<new-component />