[Vue]使用$nextTick操作v-html渲染后的Dom元素

最新推荐文章于 2024-05-14 07:00:00 发布

原创最新推荐文章于 2024-05-14 07:00:00 发布 · 768 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nextTick #v-html #dom #vue #ajax

本文展示了如何在Vue.js应用中通过点击事件触发POST请求，从'http:xxx'获取数据。在成功回调中，将接收到的数据更新到Vue实例的属性，并利用$nextTick确保DOM更新后再执行jQuery操作，为'ul'元素内的所有'a'标签设置title属性为文本内容。

<script>
var testDemo = new Vue({
    el: '#app',
 
    data: {
        // v-html会用到
        vHtml: 'xxx';
    },
 
    methods: {
        onClick: function() {
            let vueObj = this;
            this.myAjax('POST', 'http:xxx', {id: 1}, function (data) {
                if (data) {
                    vueObj.vHtml = data;
                    vueObj.$nextTick(function () {
                        // 仅在整个视图都被渲染之后才会运行的代码
                        $('ul').find('a').each(function () {
                            $(this).attr('title', $(this).text());
                        })
                    })
                }
            })
        },
        myAjax: function(type, url, data, callback) {
            try {
                $.ajax({
                    type: type,
                    url: url,
                    data: data,
                    dataType: "json",
                    timeout: 3000,
                    success: function (data) {
                        if (data.code == 0) {
                            callback(data.data);
                        } else {
                            callback();
                        }
                    },
                    error: function (error) {
                        callback();
                    },
                });
            } catch (e) {
                console.log(e);
            } finally {

            }
        }
    }
});
</script>