我在切换路由器$(document).ready()失败时在模板中使用vue-router和jQuery

我不知道jQuery的正确用法.当我刷新页面时,$(document).ready()具有作用.但是,当我通过vue-router切换页面时,$(document).ready()不起作用.

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

解决方法:

您可以使用lifecycle hooks之一来代替在Vue Web应用程序中依赖$(document).ready().您可以尝试使用mounted,因为它非常接近$(document).ready()：

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,javascript,jquery,vue-js,vuejs2
来源： https://codeday.me/bug/20191013/1910234.html