Vue v-model/v-for 不会在挂载时更新，但在第一次手动更改后

Question

我有一个充满数据库条目的下拉列表“函数”和一个包含 2 个硬编码条目的下拉列表。当打开 vue 网站时，下拉列表仍然为空，但只要我更改另一个下拉字段的值，数据库中的所需数据就可用。

我有点困惑，因为我预计将“retrieveFunctions()”添加到 mounted() 函数中会触发 v-for，更困惑的是突然更改另一个 select 字段中的内容触发它。

HTML代码：

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

脚本部分：

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

开头状态：下拉列表为空

在上方下拉列表中 selecting 后的状态：数据库条目可见且正确

Answer 1

您需要使用值（空字符串、数组、对象等）或空值来启动数据 return 对象上的所有响应属性。目前它缺少 select v-model 中使用的 _function 属性和 v-for 中使用的函数数组。您可以尝试将数据更改为以下内容：

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

Vue v-model/v-for 不会在挂载时更新，但在第一次手动更改后

Vue v-model/v-for doesn't update on mount, but after first manual change

vue.js

v-for

v-model