Vue, onChange, foreach loop, display with new html elements

Posted 1 month ago by theUnforgiven

Hi all,

I'm struggling a little trying to get the following to work.....

So basically I have a select which upon user selection it gets the ID of the record, which works fine. But upon this I want to loop through each record get certain bits of data and put within html elements on the same page.

Here's what I have currently:

// Vue File:

        <select name="property" class="form-control" v-model="propertyId" @change="getReadings">
            <option value="">Please Select</option>
            <option v-for="(property, index) in properties" 
                {{ property.name_number }} {{ property.street }}, {{ }}, {{ property.postcode }}

export default {

    name: 'TenancyMeterReading',

    props: ['properties'],

    data: () => {
        return {
            propertyId: '',
            tenancies: {}

    methods: {
        getReadings: function() {
            axios.get('/api/meter-reading/result/' + this.propertyId)
                .then(function(response) {

                    for (let tenancy =; tenancy > response.length; i++) {

                        this.tenancies = tenancy[i]
                }).catch(function(error) {

        addReading: function() {





// Blade file
<meter-reading :properties="{{ $properties }}"></meter-reading>

Here's the Vue Tools showing:

Any help/advice greatly appreciated,

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up


Reply to

Use Markdown with GitHub-flavored code blocks.