I'm using Livewire VueJS Support Plugin in a form. While I type in the non-vue components of the form, I'm getting this error in the console -
[Vue warn]: Property or method "carriageOptions" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
The error doesn't occur while I interact with the vue component of the form.
Blade
<div id="transportation">
<div class="form-group row">
<label class="col-md-3 col-form-label">Transits</label>
<div class="col-md-9 col-form-label">
@foreach ($transits as $transit)
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" id="{{ $transit->id }}" name="transit{{ $transit->id }}" type="checkbox" value="{{ $transit->id }}" v-model="checkedTransits">
<label class="form-check-label" for="{{ $transit->id }}">{{ $transit->name }}</label>
</div>
@endforeach
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="carriage_id">Carriage</label>
<div class="col-md-9">
<select class="form-control" id="carriage_id" name="carriage_id" autocomplete="off">
<option v-for="(carriageOption, index) in carriageOptions" :key="index+10" v-bind:value="carriageOption.id">
@{{ carriageOption.name }}
</option>
</select>
</div>
</div>
</div>
Javascript
new Vue({
el: '#transportation',
data: {
checkedTransits: [],
carriageOptions: [],
},
methods: {
getCarriages(){
var vm = this
this.checkedTransits.forEach(function (element) {
axios.get(`/transits/${element}?ajax=1`)
.then(response => {
vm.carriageOptions.push({name: response.data.name, id: response.data.id})
})
})
}
},
created: function () {
this.debouncedGetCarriages = _.throttle(this.getCarriages, 500)
},
watch: {
checkedTransits(newCheckedTransits, oldCheckedTransits) {
this.carriageOptions = []
this.debouncedGetCarriages()
}
}
})