Vue.js是否在组件渲染后触发事件？

JavaScript

乐猴子

2020-03-12

Vue.js中有一些自定义组件。在其中一个组件中，有一个要呈现为“ 选择”选择框的选择列表。我将它与jQuery函数一起使用$("select").chosen()。

<template v-for="upload in uploads">
    <new-upload-container :index="$index" :upload="upload" v-if="isNewUpload"></new-upload-container>
    <existing-upload-container :index="$index" :upload="upload" v-if="isExistingUpload"></existing-upload-container>
</template>

在将数据添加到uploadsVue实例中的绑定数组之后，视图将使用组件实例进行更新。不幸的是，当我尝试实例化Chosen选择字段时，它不起作用。

我不确定在将项目添加到uploadsDOM实际更新的绑定数组后是否需要很短的时间。

<template id="existing-upload-container">

      <select name="beats[@{{ index }}][existing_beat]" class="existing-beats">
           <option selected="selected" value="">-- Select a linked beat --</option>
                  @foreach ($beats as $beat)
                   <option value="{{$beat->id}}">{{$beat->name}}</option>
                  @endforeach
       </select>

    </template>

完全渲染组件后是否会触发事件？

第1364篇《Vue.js是否在组件渲染后触发事件？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
神无凯 2020.03.13

一个好的好的办法做到这将是包裹选上的插件在Vue的组件，如详细说明这里。

古一蓝染大人别太浪 2020.03.13

使用mounted回调并在那里检查代码中的数据状态。

理查德Near 2020.03.13

正确的方法是自定义指令：

<select v-chosen name="beats[@{{ index }}][existing_beat]" class="existing-beats">

//insert/require() the following before the creation of your main Vue instance
Vue.directive("chosen",{
  bind: function(){
    $(this.el).chosen();
  }
})

编辑：指令语法在Vue 2. *中已更改：

Vue.directive("chosen",{
  bind: function(el){
    $(el).chosen();
  }
})
SamStafan十三 2020.03.13

您可以在组件中尝试两种方法，根据哪种方法可以与您的软件包一起使用。在Vue对象中：

{
    ready:function(){
        // code here executes once the component is rendered
        // use this in the child component
    },
    watch: {
        uploads:function(){
            //code here executes whenever the uploads array changes 
            //and runs AFTER the dom is updated, could use this in
            //the parent component
        }
    }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android