Use of undefined constant data

Question

I want to make an dynamic dependent dropdown (when I select a Chantier in 1st select the 2nd select will fill with ouvrages of Chantier)

I want to make an dynamic dependent dropdown (when I select a Chantier in 1st select the 2nd select will fill with ouvrages of Chantier)

SalarieController

   public function getChantier()
    {
        $data = Chantier::get();
        return response()->json($data);
    }
        public function getOuvrage(Request $request)
    {
        $data = State::where('chantier_id', $request->chantier_id)->get();
        return response()->json($data);
    }

Routes\api

Route::get('getChantier', 'SalariesController@getChantier');
Route::get('getOuvrage', 'SalariesController@getOuvrage');

Route\wep.php

Route::get('payer', function () {
    return view('salarie.payer');
});

paye.blade.php

 <div class="card-body">
                        <div class="form-group">
                            <label>Chantier:</label>
                            <select class='form-control' v-model='chantier' @change='getOuvrage()'>
                              <option value='0' >Select Country</option>
                              <option v-for='data in chantiers' :value='data.id'>{{ data.chantier }}</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Select State:</label>
                            <select class='form-control' v-model='state'>
                              <option value='0' >Select State</option>
                              <option v-for='data in ouvrages' :value='data.id'>{{ data.ouvrage }}</option>
                            </select>
                        </div>
                    </div>

vuejs

export default {
    mounted() {
        console.log('Component mounted.')
    },
    data(){
        return {
            chantier: 0,
            chantiers: [],
            ouvrage: 0,
            ouvrages: []
        }
    },
    methods:{
        getChantier: function(){
          axios.get('/api/getChantier')
          .then(function (response) {
             this.chantiers = response.data;
          }.bind(this));

        },
        getOuvrage: function() {
            axios.get('/api/getOuvrage',{
             params: {
               chantier_id: this.chantier
             }
          }).then(function(response){
                this.ouvrages = response.data;
            }.bind(this));
        }
    },
    created: function(){
        this.getChantier()
}

}

Answer 1

The problem is on {{ data.chantier }}. I assume you're handling it with Vue but you have to tell Blade to ignore those curly braces, otherwise, it will try to output it as a php value, which doesn't exist.

Replace {{ data.chantier }} with @{{ data.chantier }} and it should do.