Load events after select dropdown is chosen

[bbashy]

Currently assigning events to eventSources like so in methods;

changeSite(val) {
    console.log('changeSite '+JSON.stringify(val));

    this.events = this.eventSources;
},

this.eventSources goes to the data attribute like so;

data() {
    return {
        events: [],
        site: null,
        eventSources: [
            {
                events(start, end, timezone, callback) {
                    axios.get(`/api/events/${this.site}`).then(response => {
                        callback(response.data.data)
                    })
                }
            }
        ],
    }
}

But obviously ${this.site} can't be accessed there in the call.

Just wondering if you had a better way/idea as I'm stuck and not that great at JS/Vue :P

[BrockReece]

Hi @bbashy

You can move the eventSources to a computed prop and create a ref to this before returning the array of sources.

data() {
    return {
        events: [],
        site: null,
    }
},

computed: {
    eventSources() {
        $this = this
        return [
            {
                events(start, end, timezone, callback) {
                    axios.get(`/api/events/${$this.site}`).then(response => {
                        callback(response.data.data)
                    })
                }
            }
        ]
    }
}

that should do the trick

[bbashy]

@BrockReece Thanks for the reply! I forgot to put something about the issue title in there as well.

I'm looking to load the events after the select dropdown value is chosen. Initially I want the calendar empty. Computed can't be loaded on a method or @change="" action?

[BrockReece]

Ok, so why don't you make the events a computed property, then it will watch for changes to the site value and automatically return the array from there? Cut out the @change and eventSources?

<select v-model="site">
  <option>foo</option>
  ...
</select>

data() {
    return {
        site: null,
    }
},

computed: {
    events() {
        if (!this.site) return [] 

        $this = this
        return [
            {
                events(start, end, timezone, callback) {
                    axios.get(`/api/events/${$this.site}`).then(response => {
                        callback(response.data.data)
                    })
                }
            }
        ]
    }
}

[bbashy]

OK, that makes way more sense! Working now.

Thank you so much for that!

[BrockReece]

No problem, happy to help