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>

和 javascript

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;

                });

            }

当我单击以下按钮时，我会从 Mailchimp 中获取我的列表并且它可以工作

我尝试做的是在加载选择时执行该功能。我尝试使用@load，@mount ...没有任何效果。

我怎样才能做到这一点 ？

编辑 ：

我正在全局编码的是一种带有块的页面构建器。每个块作为字段并且是可选的。而这个选择是块的一部分。这部分代码只是我代码的一小部分。

出于这个原因，我认为我不能使用全局 mount() 事件，因为在加载页面时，我的选择块还不存在，而且我没有参数“connexion”

但我想我可以调用一个自定义函数，比如直接在选择上使用@mounted。但是，这不起作用:(

任何的想法 ？

Answer 1

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

Answer 2

你有两个误解mounted：这不是一个事件。这是一个生命周期钩子，它作为组件生命周期的一部分执行。它不会在页面加载时触发一次。每当安装（即渲染并准备好运行）时，它都会为任何 Vue 组件触发。所以它会在你的组件每次被挂载时运行，如果你通过使用销毁你的组件，v-if那么它会在重新创建时再次运行。作为我第二点的一个例子，你可以看看这个fiddle。要将mounted钩子添加到组件中，只需将其添加到组件的声明对象中，如下所示：data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; mailchimp_lists : [],&nbsp; &nbsp; &nbsp; &nbsp; errors : {}&nbsp; &nbsp; };},methods: {&nbsp; &nbsp; getMailchimpLists(connexionId){&nbsp; &nbsp; &nbsp; &nbsp; axios.get('/api/mailchimp/lists?connexion_id='+connexionId)&nbsp; &nbsp; &nbsp; &nbsp; .then(result => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.mailchimp_lists = result.data;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch(error => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.errors = error;&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }},mounted: function() {&nbsp; &nbsp; // Your code goes here}