How to solve "interpolation inside attributes has been removed". Vue and Laravel 5.8

Question

I'm trying to pass a user auth ID to hidden using Vue and Laravel, but when I submit the form, I get this error:

value="{{ Auth::user()->id }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

Please help me to overcome this error.

My Component Code is

<template>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Example Component</div>
                <button class="btn btn-success" @click="updateLocation">Update Position</button>
                <div class="card-body">

                    <div id="realtimemap" style="height: 412px; width: 100%;"></div>
                    <input type="hidden" class="form-control" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
                </div>
            </div>
        </div>
    </div>
</div>

<script>

export default{

    data(){

        return{
            map:null,
            marker:null,
            center:{lat: 10, lng: 10},
            data:null,
            lineCoordinates:[]
        }
    },

    methods:{

        mapInit(){


            this.map = new google.maps.Map(document.getElementById('realtimemap'),{
                center: this.center,
                zoom: 8
            });

            this.marker = new google.maps.Marker({
                map: this.map,
                position: this.center,
                animation:"bounce",
            });
        },

        updateMap(){
            let newPosition = {lat:this.data.lat,lng:this.data.long};
            this.map.setCenter(newPosition);
            this.marker.setPosition(newPosition);

            this.lineCoordinates.push(new google.maps.LatLng(newPosition.lat,newPosition.lng));

            var lineCoordinatesPath = new google.maps.Polyline({
                path: this.lineCoordinates,
                geodesic: true,
                map: this.map,
                strokeColor: '#FF000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
        },

        updateLocation(){

            let randomNumber=Math.random();

            let position={
                lat:10+randomNumber,
                long:10+randomNumber
            };

            axios.post('/api/map',position).then(response=>{
                console.log(response);
            })
        }

    },

    mounted() {
        console.log('Component mounted.');
        this.mapInit();
    },
    created(){
        Echo.channel('location')
            .listen('SendLocation', (e) => {
                this.data=e.location;

                this.updateMap();
                console.log(e);
        });
    }
}

Controller Code is

public function store(Request $request)
{


   $input = $request->all(); 

   $realtimelocations = Realtimelocations::create($input);
   event(new SendLocation($realtimelocations));
   return response()->json(['status'=>'success', 'data'=>$realtimelocations]);

}

please let me know the solution. Thanks in advance.

Answer 1

You can't use laravel blade interpolation inside vue component file. You have to think other way. For example, you can declare user as global javascript variable, and use it in vue.js component.