我在Vue中有一些自定义组件.js.在其中一个组件中,我有一个 Select 列表,我想将其渲染为Chosen Select 框.我将其与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>

将数据添加到Vue实例中的uploads绑定数组后,视图将使用组件的实例进行更新.不幸的是,当我试图在select字段上实例化Chosen时,它不起作用.

我不确定在向DOM实际更新的uploads绑定数组中添加一个项之后是否需要很短的时间.

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

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

推荐答案

您可以在组件中try 两种方法,根据哪一种方法适用于您的包.在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
        }
    }
}

Vue.js相关问答推荐

如何禁用Vuetify v—stepper操作按钮

通过另一个文件调用模块化窗口组件

v-on 的 .native 修饰符仅在组件上有效,但在 标签上使用

组合 API | Vue 路由参数没有被监视

更改 Vuetify 轮播高度

Eslint Vue 3 解析错误:'>' expected.eslint

使用数组元素的计算(computed)属性

如何在 Vue.js 中获取完整的当前日期和时间,而无需编写大量 JavaScript 行

如何将 Nuxt.js 更新到最新版本

我可以使用 vue.js v-if 来判断值是否存在于数组中

如何在 vue 3 中获取路由的参数?

如何在 Vue.js 3 中使用 Vue 3 Meta?

将 Vuetify 从 1.5 升级到 2 时,Sass-loader 错误 'options has an unknown property 'indentedSyntax''

Vue.js:TypeError:无法设置只有 getter 的 # 的属性props

VueJS 通过渲染传递数据

如何将数据属性设置为从 Vuex getter 返回的值

emit更新数组不起作用

使计算的 Vue 属性依赖于当前时间?

如何访问通用 javascript 模块中的当前路由元字段

Vue-i18n - 无法读取未定义的属性配置