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

Posted 3 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:

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

Reply to

Use Markdown with GitHub-flavored code blocks.