theUnforgiven
179
12
Vue

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

Posted 6 months 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:

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

<script>
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 = response.data; tenancy > response.length; i++) {

                        this.tenancies = tenancy[i]
                    }
                }).catch(function(error) {
                    console.log(error.response.data);
                });
               
        },

        addReading: function() {

        }
    }

}
</script>

<style>

</style>

// 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.

Reply to

Use Markdown with GitHub-flavored code blocks.