Why can't vue assign a value to get the rendered html?

methods: {
        pdf:function(){
            var _html;
            this.$nextTick(()=>{
                var html=document.querySelector(".Content");
                var _html=html
                console.log(_html)    //
            });
            console.log(_html)    //
        }
    }

use VUE to get the rendered HTML code. Console.log (_ html) (the first) in
this.$nextTick can get the html code
, but the console.log (_ html) (second) in pdf:function () is undefined
how can the rendered HTML code be assigned to the outside of this.$nextTick ()?

=

Supplementary content:

pdf:function(){
            var name="";
            var _html=document.querySelector(".Content");
            //document.querySelector(".Content")html
            $.ajax({
              type: "POST",
              dataType: "json",
              url: "{:url("api/pdf/create")}",
              data: { "html": _html,"name":name},
              success:function(res){
                   //_htmlajax:
                   //TypeError: Cannot set property "cache" of undefined
              }
            });
        }

Jun.28,2022

this.$nextTick is a method that is executed immediately after an dom update. Similar to setTimeout. According to the code above, you must execute the second console first. At this time, html is of course undefined


$nextTick performing relevant logic operations


pdf: async function() {
      let _html;
      await this.$nextTick(() => {
        var html = document.querySelector('-sharpapp');
        _html = html
        console.log(_html)    //
      });
      console.log(_html)    //
    }

the cause of the problem is what @ goded_v said, and you can use a callback function to solve the problem. (ps: one more problem. In your original text, the variable _ html has been declared outside this.$nextTick , and another _ html has been declared inside.)
append: $ajax add cache:false , please refer to link description


.
var _html;
this.$nextTick(()=>{
    var html=document.querySelector('.Content');
    var _html=html
    console.log(_html)    //
});
setTimeout(() => {
    console.log(_html)    //
}, 0)

change it to this. This.$nextTick is executed asynchronously, and your line of code console.log (_ html) is executed synchronously, so if you want to get variables assigned in async, you have to make console.log (_ html) also asynchronous

.
Menu