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
              }
            });
        }

Vue.js
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

.

Previous: How to update a user attribute automatically when multiple conditions are reached in java?

Next: The style problem of element-ui table multi-column sorting

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b9fc0d-2f4c9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b9fc0d-2f4c9.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?