vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li ref="li" v-for="(item,index) in list" :key="index">{{item.type}}</li>
        </ul>
        <button @click="getData">获取数据</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: ''
            },
            methods: {
                getData() {
                    let url = 'https://api.apiopen.top/getJoke?page=1&count=2&type=video';
                    let that = this;
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success(data) {
                            console.log(data);
                            that.list = data.result;
                            console.log(that.$refs.li);
                            // 获取到数据时使用
                            that.$nextTick(() => {
                                console.log(that.$refs.li, 'nextTick');
                            });
                        },
                        fail(err) {
                            console.log(err);
                        }
                    });
                }
            },
            watch: {
                // 监听属性，数据变化时使用，如果监听属性还会改变就不合适这样使用
                list() {
                    this.$nextTick(() => {
                        console.log(this.$refs.li, 'watch');
                    });
                }
            }
        });
    </script>
</body>

</html>

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue