I am currently developing a project using Laravel 5.5 & Vue 2.x. In this project, I need to define certain data in the frontend and then use it within the Vue instance:
Initially, I have my view or HTML file set up like this:
<fieldset class="form-group col-md">
<label for="country" class="control-label">Country</label>
<select class="form-control" name="country" id="country" v-model="selectedCountry" @change="selectCountry()">
<option :value="null" :selected="selectedCountry">Select one</option>
<option v-for="country in countries" :value="country.id">@{{ country.name }}</option>
</select>
</fieldset>
<script>
var formSelectedCountry = {{ isset($property) ? $property->country_id : "null" }};
var formSelectedDepartment = {{ isset($property) ? $property->department_id : "null" }};
var formSelectedLocation = {{ isset($property) ? $property->location_id : "null" }};
var formSelectedZone = {{ isset($property) ? $property->zone_id : "null" }};
</script>
Everything works well with this setup. However, on other pages where formSelectedCountry (for example) is not defined, Vue seems to encounter issues.
In my app.js, I have the following:
data: {
...
selectedCountry: formSelectedCountry,
selectedDepartment: formSelectedDepartment,
selectedLocation: formSelectedLocation,
selectedZone: formSelectedZone,
...
}
I've also attempted to pre-define these variables by adding the following lines:
formSelectedCountry: '',
formSelectedDepartment: '',
formSelectedLocation: '',
formSelectedZone: '',
Alternatively, there might be a way to set the data using something like
selectedCountry: (formSelectedCountry ? formSelectedCountry : null)Your thoughts and suggestions would be greatly appreciated.