javascript - 如何将ajax代码转换为django中的vue.js axios方法

Question

如果用户点击喜欢按钮网页不刷新并且喜欢的计数也更新而不刷新所以，首先我用ajax编写然后我想在转换为vue.js后将其转换为vue.js它不起作用。任何人都可以帮助我实现这一目标。

这里我写了 vue.js 的 axios 方法。我在 html 模板中访问过的 html 模板

<div id = "deals-vikreya">
    <a class="likebutton" style="
     {% if request.session.email %}pointer-events: auto;
     {% else %}pointer-events: none;{% endif %}" id="like-{{i.id}}" href="#"
     data-catid="{{ i.id }}">
     <i class="fa fa-thumbs-o-up" id="like-icon-{{i.id}}" aria-hidden="true"
     style="color: gray"></i>
     </a>
     <span id="cm_count{{i.id}}">
     ({{ c_count }})
     </span>
</div>

vue.js axios

<script>
    new Vue({
     el: '#deals-vikreya',
        data() {
            return {};
        methods: {
            $('.likebutton').click(function(){
            var catid;
            catid = $(this).attr("data-catid");
            console.log(catid);
            axios(
            {
                method : "POST",
                url: "{% url 'post_comment_like' + catid %}", //django path name
                data:{
                         post_id: catid
                },
                success: function( data )
                {
                console.log("like saved");
                console.log(data.comment_count);
                document.getElementById("cm_count"+catid).innerHTML ="(" + data.comment_count + ")";
                $( '#like-'+ catid ).attr("href", "/post_comment_like_remove/" + catid);
                $( '#like-icon-'+ catid ).css("color", "#DB0038");
                }
             })
        });
        },

    })
</script>

标签： javascripthtmldjangovue.js