I have a dropdown list "functions" that is filled with database entries and a dropdown list with 2 hardcoded entries. When the vue website is opened the dropdown list remains empty but as soon as I change the value of the other dropdown field the desired data from the database is available.

I'm a bit confused because I expected that adding "retrieveFunctions()" into the mounted() function would trigger the v-for, and even more confused that changing something in another select field suddenly triggers it.

The HTML code:

<template>
<div >
    <div v-if="!submitted">
        <div >
            <div >
                <p><a style="width:500px"  data-toggle="collapse" href="#generalInformation" role="button" aria-expanded="true" >
                    General Information</a></p>
            <div  id="generalInformation">
            <!-- NAME -->          
            <div >
                <input placeholder="Name" type="text" 
                id="name" required v-model="component.name" name="name">
            </div>   
            <!-- DOMAIN -->          
            <div >
                <div >
                <label style="width:100px"  for="inputGroupDomain">Domain</label>
                </div>
                <select v-model="component.domain" 
                         
                        id="inputGroupDomain"
                >
                    <option value="Power System">Power System</option>
                    <option value="ICT">ICT</option>
                </select>
            </div>
            <!-- FUNCTION -->
            <div >
                <div >
                <label style="width:100px"  for="inputGroupFunction">Functions</label>
                </div>
                <select v-model="_function"  id="inputGroupFunction">
                        <option :
                            v-for="(_function, index) in functions"
                            :key="index"
                            value= _function.name>
                        {{ _function.name }}
                    </option>              
                </select>
      </div>
    </div>
    <p>
    <button @click="saveComponent" >Add Component</button>
    </p>
    </div>
    </div>    
    </div>
<div v-else>
    <h4>Component was added succesfully!</h4>
    <button  @click="newComponent">Proceed</button>
</div>

The script part:

<script>
import FunctionDataService from "../services/FunctionDataService";
export default {
  name: "add-component",
  data() {
    return {
      component: {
        id: null,
        name: "",
        type: "",
        domain: "",
      },
      submitted: false
    };
  },
    methods: {
        retrieveFunctions() {
        FunctionDataService.getAll()
        .then(response => {
            this.functions = response.data;
            console.log(response.data);
            })
            .catch(e => {
            console.log(e);
            });
        },
        refreshList() {
        this.retrieveFunctions();
        },
    },
    mounted() {
        this.retrieveFunctions();
    }
};
</script>
        refreshList() {
        this.retrieveFunctions();
        },
    },
    mounted() {
        this.retrieveFunctions();
    }
};
</script>

State in the beginning: Dropdown list empty

State after selecting something in the upper dropdown list: Database entries are visible and correct

CodePudding user response：

You need to initiate all responsive properties on the data return object with either a value (empty string, array, object, etc) or null. Currently it's missing the _function attribute used in the select v-model and the functions array used in the v-for. You can try to change the data to the following:

data() {
    return {
      _function: "",
      functions: [],
      component: {
        id: null,
        name: "",
        type: "",
        domain: "",
      },
      submitted: false
    };
  },