我在模板中使用vue-router和jQuery，当我切换路由器$（document）.ready（）失败时 [英] I use vue-router and jQuery in the template,when i switch router $(document).ready() is failure

问题描述

我不知道jQuery在vue中是否正确使用。刷新页面时， $（文档）.ready（）有一个角色。但是当我通过vue-router切换页面时， $（文件）.ready（）不起作用。

I do not know jQuery in vue correct usage. When I refresh page, $(document).ready() has a role. But when I switch the page through vue-router, $(document).ready() does not work.

<template>
    <div id="photo_wrap">
        <div class="photo_frame" v-for="(photo,index) in photos">
            <img v-bind:src=" 'src/assets/photo/' + index + '.jpg' ">
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    export default {
        name: 'photo',
        data() {
            return {
                photos: [
                    {},{},{},{},{}
                ]
            }
        }
    }

    $(function () {
        console.log('something')
    })

</script>

推荐答案

而不是依靠 $ （文档）.ready（）在vue webapp中，您可以使用生命周期钩子用于此目的。您可以尝试使用已安装，因为它非常接近 $（文件）.ready（）：

Instead of relying on $(document).ready() in a vue webapp, you can use one of the lifecycle hooks for this purpose. You can try using mounted as it comes pretty close to $(document).ready():

刚安装实例后调用el替换为el新创建的vm。$ el。如果将根实例挂载到文档内元素，则在调用挂载时，vm。$ el也将在文档中。

Called after the instance has just been mounted where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

您可以像这样挂钩：

<script>
    export default {
        name: 'photo',
        data() {
            return {
                photos: [
                    {},{},{},{},{}
                ]
            }
        },
        mounted () {
          console.log('something')
        }
    }

这篇关于我在模板中使用vue-router和jQuery，当我切换路由器$（document）.ready（）失败时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！