[Vuejs]-How do I watch for onChange of specific select menu that was dynamically generated?

by

1👍

You can try remodeling your data to experience the power of Vue.

Your template:

<template>
    <v-app>
        <v-row v-for="(rule, index) in rules" :key="index">
            <v-col cols="12" sm="6" md="3">
                <v-select
                    dense
                    outlined
                    item-text="name"
                    item-value="id"
                    label="Attribute"
                    :items="rule.attributes"
                    @change="onChange($event, rule, index)"
                ></v-select>
            </v-col>

            <v-col cols="12" sm="6" md="2">
                <v-select
                    outlined
                    dense
                    item-text="name"
                    item-value="id"
                    label="Operator"
                    :items="rule.operators"
                ></v-select>
            </v-col>

            <v-col cols="12" sm="6" md="4">
                <v-text-field dense outlined label="Values"></v-text-field>
            </v-col>
        </v-row>
    </v-app>
</template>

Notice how everything is rendered in the rules data. Here the rules data will be an array containing all the rows:

rules = [
    { 
        attributes: ["11", "22"],
        operators: []
    }
]

Your script should look like below:

<script>
import axios from "axios"

export default {
    name: "App",
    data() {
      return {
        rules: [{
           attributes: ["11", "22", "33"],
           operators: [],
        }],
      };
    },
    methods: {
        async onChange(changed, rule, index) {
            // where:
            // `changed` is the value selected
            // `rule` is the attributes and rule in the selected row
            // `index` is the index in the rules array that just got changed
            console.log(changed, rule, index);
            const operators = await this.fetchApiData(changed);

            this.$set(this.rules, index, { ...rule, operators: operators });
        },
    },
    async fetchApiData(data) {
        const response = await axios.post(window.MTS_URL, data);
        return response.data.operators;
    },
};
</script>

if you want to add more rows, you just need to push an object to the rules data:

this.rules.push({
    attributes: ["new attribute 1", "new attribute 2"],
    operators: []
})

Leave a comment