VueJS：触发函数以在加载表单时填写选择

Question

我有这个代码<template>    <h5>Add to a mailchimp list</h5>    <div class="form-group">       <label>Connexion Mailchimp</label>       <select class="form-control" v-model="trigger.connexion_id" @change="updateTrigger(trigger)">          <option value="">Choose</option>          <option v-if="connexion.service == 'mailchimp'" v-for="connexion in connexions" v-bind:value="connexion.id">{{ connexion.name }}</option>       </select>    </div>    <div class="form-group">    <label>List</label>        <div class="form-row">            <div class="col-10">                <select class="form-control" @mounted="getMailchimpLists(trigger.connexion_id)" @change="updateTrigger(trigger)" v-model="trigger.data.listid" >                <option value="">Choose a list</option>                <option v-if="mailchimp_lists" v-for="list in mailchimp_lists" v-bind:value="list.id" :selected="list.id == trigger.data.listid">{{ list.name }}</option>            </select>        </div>        <div class="col-2">           <button class="btn btn-outline-dark" @click="getMailchimpLists(trigger.connexion_id)"><i class="fas fa-sync"></i></button>        </div>     </div>    </div></template>和 javascriptdata() {    return {        mailchimp_lists : [],        errors : {}    };},methods:{            getMailchimpLists(connexionId){               axios               .get('/api/mailchimp/lists?connexion_id='+connexionId)               .then(result => {                   this.mailchimp_lists = result.data;                })                .catch(error => {                    this.errors = error;                });            }当我单击以下按钮时，我会从 Mailchimp 中获取我的列表并且它可以工作我尝试做的是在加载选择时执行该功能。我尝试使用@load，@mount ...没有任何效果。我怎样才能做到这一点 ？编辑 ：我正在全局编码的是一种带有块的页面构建器。每个块作为字段并且是可选的。而这个选择是块的一部分。这部分代码只是我代码的一小部分。出于这个原因，我认为我不能使用全局 mount() 事件，因为在加载页面时，我的选择块还不存在，而且我没有参数“connexion”但我想我可以调用一个自定义函数，比如直接在选择上使用@mounted。但是，这不起作用:(任何的想法 ？

Answer 1

没有挂载的事件，它是一个生命周期方法。我不知道触发器对象在您的代码中的位置，也许它是计算数据？但无论如何，请确保您可以在此模板中访问它。您还应在本地数据中初始化 conexion 参数，以便在模板中使用它。将其初始化为一个空对象。数组 mailchimp_lists 始终为真，请检查 mailchimp_lists.length。希望这会有所帮助

Answer 2

你有两个误解mounted：

• 这不是一个事件。这是一个生命周期钩子，它作为组件生命周期的一部分执行。

• 它不会在页面加载时触发一次。每当安装（即渲染并准备好运行）时，它都会为任何 Vue 组件触发。所以它会在你的组件每次被挂载时运行，如果你通过使用销毁你的组件，v-if那么它会在重新创建时再次运行。

作为我第二点的一个例子，你可以看看这个fiddle。

要将mounted钩子添加到组件中，只需将其添加到组件的声明对象中，如下所示：

data() {

    return {

        mailchimp_lists : [],

        errors : {}

    };

},

methods: {

    getMailchimpLists(connexionId){

        axios.get('/api/mailchimp/lists?connexion_id='+connexionId)

        .then(result => {

            this.mailchimp_lists = result.data;

        })

        .catch(error => {

            this.errors = error;

        });

    }

},

mounted: function() {

    // Your code goes here

}