Livewire vue warn property or method is not defined on the instance but referenced during render

Viewed 127

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()
    }
  }
})
0 Answers
Related