Creating a dynamic dropdown menu to display nested arrays in Vuejs

Question

Creating a dynamic dropdown menu to display nested arrays in Vuejs

I have some important data

https://i.sstatic.net/Cq2t6.png

Challenge

I'm facing difficulty in accessing the tubes array within my data

Solution

script

data() {
        return {
            types: []
        }
    },
    methods: {
        handleChange (val) {
            axios.get(`/api/admin/getFromTubes/${val}`)
            .then(res => {
                this.types = res.data.data.tubes;
            })
            .catch(error => {
                console.log(error);
            })
        }
    }

template

<el-form-item label="Old Core">
        <el-select style="width: 100%;" filterable clearable v-model="form.old_core_id" placeholder="Select Old Core">
            <el-option
            v-for="cable in types"
            :key="cable.id"
            :label="cable.name"
            :value="cable.id">
                <span style="float: left">
                    {{ cable.name }}
                </span>
            </el-option>
        </el-select>
    </el-form-item>

Inquiry

Any suggestions on how to properly display the tubes array in the select dropdown template?

javascript arrays vue.js vuejs2 vue-component

Answer 1

Answer №1

Shouldn't the code look like this for handling changes:

handleChange (val) {
    fetch(`/api/admin/getFromTubes/${val}`)
    .then(response => response.json())
    .then(data => {
        this.types = data[0].tubes;
    })
    .catch(error => {
        console.log(error);
    })
}

or perhaps it should be:

this.types = res.data.data[0].tubes;

Answer 2

Shouldn't the code look like this for handling changes:

handleChange (val) {
    fetch(`/api/admin/getFromTubes/${val}`)
    .then(response => response.json())
    .then(data => {
        this.types = data[0].tubes;
    })
    .catch(error => {
        console.log(error);
    })
}

or perhaps it should be:

this.types = res.data.data[0].tubes;

Creating a dynamic dropdown menu to display nested arrays in Vuejs

Challenge

Solution

Inquiry

Answer №1

Similar questions

Here is a way to trigger a function when a select option is changed, passing the selected option as a parameter to the function

The Navbar is throwing a TypeError because it is unable to retrieve the property 'classList' of null

From AJAX response to React state attribute, store the JSON data

Managing multiple sockets within a Vue application

Using NodeJS with the Express framework to send a GET request

Seamless social login integration for registering with Stormpath

The content remains constant when navigating within the same view

The variable 'form' has not been assigned an initial value in the constructor of the property

Display the item request form whenever a selection of an unidentified item is made using select2

Utilizing VUE to transfer JSON data from a click event to an HTML template

Issue encountered during compilation: EPERM: Unable to locate "vite import glob" (scandir operation not authorized)

How to send two different types of data using jQuery/AJAX to a .php file? (Syntax)

"Want to learn how to dynamically disable an input field in AngularJS when another field is selected? Find out how to achieve this using the

Guide to adding a URL link to an image tag in Vuetify and Nuxt.js

Encountering a "Cannot GET" error when utilizing mongoose

Guide on retrieving the ID after a new entry is added using a trigger in Express.js and MySQL

The socket.on() function is not able to receive any data

What is the best way to access the child component in React?

Generating a unique serial ID using Angular/JS

Encountering a issue when trying to click the Menu icon in a Vue 3 admin template