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

Question

不知道jQuery在vue中的正确用法。当我刷新页面时，$(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>

Answer 1

您可以使用 lifecycle hooks for this purpose. You can try using mounted 之一，而不是依赖于 vue webapp 中的 $(document).ready()，因为它非常接近 $(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')
        }
    }

Answer 2

我知道您可能已经找到了想要的答案，但是对于那些来到这里寻找在 vue 中使用 jQuery 的方法的人：

你应该只在你的 index.html 文件上添加一个脚本标签，然后你可以在任何时候使用 $ 变量组件由 vue 创建。就像提到的生命周期钩子之一，或者作为 v-on 指令调用的方法。

例如：

<template>
    ///get user name and password here through inputs///
    <button v-on:click="submit"> submit me please</button>
</template>

<script>
export default {
    name: 'something',
    data() {
        return {
            username : '',
            password : '',
            baseUrl : 'felan.com'
        }
    },
    methods: {
        submit() {

            $.post(this.baseUrl + '/member/login', {
                username: this.username,
                password: this.password,
            }).then((response) => {
                if (response.valid) {
                    //do something
                } else {
                    //do something else
                }
            }).fail(() => console.log('failed'))
        }
    }
}
</script>

<style>
</style>

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

I use vue-router and jQuery in the template,when i switch router $(document).ready() is failure

javascript

jquery

vue.js

vue-router

vuejs2