Loading various elements based on multiple parameters in Vue.js 2: The ultimate guide

Question

Loading various elements based on multiple parameters in Vue.js 2: The ultimate guide

My API consists of endpoints that return lists of JSON objects:

/api/data/foo
/api/data/bar
/api/data/fizz

In my single-page application, I have a table and a dropdown selector:

<select v-model="tableChoice">
    <option selected>Foo</option>
    <option>Bar</option>
    <option>Fizz</option>
</select>

<table class="table table-hover">
    <thead>
        <tr>
            <th v-for="header in tableHeaders">
                {{ header }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="record in tableData" :key="record.recordId">
            <td v-for="element in record">{{element}}</td>
        </tr>
    </tbody>
</table>

I currently have three separate Vue components with their own API URLs and table headers:

var fooLink = 'api/foo';

new Vue({
    el: '#app',
    data: {
        tableHeaders:["Record ID","Record Name", "Record Detail"],
        tableData: null,
        dataChoice: 'Foo'
    },
    methods:{
        getFooData: function(){
            this.$http.get(fooLink).then(function(response){
                this.tableData = response.data;
            }, function(error){
                console.log(error.statusText);
            });
        }
    },
    mounted: function () {
        this.getFooData();
    }
});

I am looking to use a single table or component where the API URL used is determined by the tableChoice variable. How can I achieve this without clear documentation on conditional loading with props?

javascript vue.js vuejs2

Answer 1

Answer №1

<select v-model="tableChoice">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

Implement a select box change handler.

new Vue ({
    el: '#app',
    data: {
        tableData: null,
        tableChoice: 'apple'
    },
    computed: {
        apiUrl() {
            switch (this.tableChoice) {
                case 'apple': return '/api/data/apple';
                case 'banana': return '/api/data/banana';
                case 'orange': return '/api/data/orange';
            }
        },
        tableHeaders() {
            switch (this.tableChoice) {
                case 'apple': return ['Apple'];
                case 'banana': return ['Banana'];
                case 'orange': return ['Orange'];
            }
        },
    },
    watch: {
        tableChoice() {
            this.getFruitData();
        },
    },
    methods: {
        getFruitData() {
            this.$http.get(this.apiUrl).then(response => {
                this.tableData = response.data;
            }, error => {
                console.log(error.statusText);
            });
        }
    },
    mounted() {
        this.getFruitData();
    }
});

Answer 2

<select v-model="tableChoice">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

Implement a select box change handler.

new Vue ({
    el: '#app',
    data: {
        tableData: null,
        tableChoice: 'apple'
    },
    computed: {
        apiUrl() {
            switch (this.tableChoice) {
                case 'apple': return '/api/data/apple';
                case 'banana': return '/api/data/banana';
                case 'orange': return '/api/data/orange';
            }
        },
        tableHeaders() {
            switch (this.tableChoice) {
                case 'apple': return ['Apple'];
                case 'banana': return ['Banana'];
                case 'orange': return ['Orange'];
            }
        },
    },
    watch: {
        tableChoice() {
            this.getFruitData();
        },
    },
    methods: {
        getFruitData() {
            this.$http.get(this.apiUrl).then(response => {
                this.tableData = response.data;
            }, error => {
                console.log(error.statusText);
            });
        }
    },
    mounted() {
        this.getFruitData();
    }
});

Answer 3

Answer №2

To implement this functionality, follow the steps below:

<select v-model="selectedOption">
    <option v-for="item in items" v-bind:value="item.id">
        {{ item.name }}
      </option>
</select>

<table class="table table-striped">
    <thead>
        <tr>
            <th v-for="col in columns">
                {{ colName }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="row in data" :key="row.id">
            <td v-for="item in row">{{ item.value }}</td>
        </tr>
    </tbody>
</table>

Javascript Code:

new Vue ({
    el: '#app',
    data: {
        columns:["ID","Name", "Description"],
        data: null,
        selectedOption: this.items[0].id},// default value
        items: [
            {name: 'Item 1', id: '/api/item/1'},
            {name: 'Item 2', id: '/api/item/2'},
            {name: 'Item 3', id: '/api/item/3'}
        ]
    },
    methods:{
        fetchData: function(url){
            this.data = null;
            this.$http.get(url).then(function(response){
                this.data = response.data;
            }, function(error){
                console.log(error.message);
            });
        }
    },
    mounted: function () {
        this.fetchData(this.selectedOption);
    },
    watch: {
        selectedOption(newValue){
            this.fetchData(newValue);
        }
    }
});

Answer 4

To implement this functionality, follow the steps below:

<select v-model="selectedOption">
    <option v-for="item in items" v-bind:value="item.id">
        {{ item.name }}
      </option>
</select>

<table class="table table-striped">
    <thead>
        <tr>
            <th v-for="col in columns">
                {{ colName }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="row in data" :key="row.id">
            <td v-for="item in row">{{ item.value }}</td>
        </tr>
    </tbody>
</table>

Javascript Code:

new Vue ({
    el: '#app',
    data: {
        columns:["ID","Name", "Description"],
        data: null,
        selectedOption: this.items[0].id},// default value
        items: [
            {name: 'Item 1', id: '/api/item/1'},
            {name: 'Item 2', id: '/api/item/2'},
            {name: 'Item 3', id: '/api/item/3'}
        ]
    },
    methods:{
        fetchData: function(url){
            this.data = null;
            this.$http.get(url).then(function(response){
                this.data = response.data;
            }, function(error){
                console.log(error.message);
            });
        }
    },
    mounted: function () {
        this.fetchData(this.selectedOption);
    },
    watch: {
        selectedOption(newValue){
            this.fetchData(newValue);
        }
    }
});

Loading various elements based on multiple parameters in Vue.js 2: The ultimate guide

Answer №1

Answer №2

Similar questions

Issue with Iconify icon not updating when "data-icon" is set using setAttribute()

The next-auth/discord callbacks do not make any changes to the data

Unable to retrieve image: status code 402 - payment required

Interacting with a JavaScript alert by clicking the OK button using C# in a web browser control

The second parameter of the filter function is malfunctioning

Monaco Editor: Module 'monaco-editor' is missing despite being successfully installed

How can the camera's yaw be accurately determined using THREE.js techniques?

What is the process for altering the background color in this code snippet?

Execute the SQL "function" (or stored procedure?) whenever a database column is queried

Receiving multiple Firebase notifications on the web when the same application is open in multiple tabs

What is the best way to conceal a set of buttons on the main page using vue.js?

The HTML file contains the complete version number of Firefox

Looking to fill every space? Try using React with MUI Grid!

Exploring the realms of Dynamic Programming to retrieve comprehensive match data

Utilize Firestore's limit feature with variables

Looking to connect a dropdown to an icon that has the type "button"?

Combining shapes in three.js

AngularJS: steer clear of relying on the 'angular' global variable

Tips for altering the smoke hue on a three.js panel

Sending parameters and obtaining results with AngularJS