vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題

更新時(shí)間：2020年07月31日 09:18:03 作者：weixin_43783614

這篇文章主要介紹了vue 解決無(wú)法對(duì)未定義的值,空值或基元值設(shè)置反應(yīng)屬性報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

Cannot set reactive property on undefined, null, or primitive value: //無(wú)法對(duì)未定義的值、空值或基元值設(shè)置反應(yīng)屬性：

比如我們?cè)趯?xiě)一個(gè)表單，提交成功后要清空表單

我把數(shù)據(jù)綁在上面了方便看，確定提交成功我們一般要清空input，而我在js里開(kāi)始這樣寫(xiě)

我寫(xiě)的時(shí)候提交成功直接把這個(gè)對(duì)象變成空了，再次打開(kāi)彈窗就會(huì)報(bào)這類型錯(cuò)

上面綁的數(shù)據(jù)已經(jīng)成空了，所有找不到這個(gè)對(duì)象包括key ，value

清空的話，單個(gè)清空，或者直接對(duì)象為空

或者用遍歷都可以，就這個(gè)rz問(wèn)題搞了好一會(huì)。。。。

補(bǔ)充知識(shí)：解決Uncaught TypeError: Cannot set property 'onclick' of null錯(cuò)誤的方法

問(wèn)題分析：當(dāng)JS文件放在head標(biāo)簽里中時(shí)，并且綁定了onclick事件，就出現(xiàn)了這個(gè)錯(cuò)誤

原因：

W3School中介紹瀏覽器先加載完按鈕節(jié)點(diǎn)才執(zhí)行JS，當(dāng)瀏覽器自頂向下解析時(shí)，找不到onclick綁定的按鈕節(jié)點(diǎn)了

如下面這個(gè)例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件</title> 
<script>
 var Btn = document.getElementById('btn');
 Btn.onclick = function(){ 
  console.log("push the button ");  
 }
</script> 
</head> 
<body> 
 <button id="btn">計(jì)算</button> 
</body>
</html>

就會(huì)出現(xiàn)這個(gè)這個(gè)錯(cuò)誤，如下圖：

解決辦法一：把JS內(nèi)容用window.οnlοad=function(){ }包裹起來(lái)

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>事件</title>
 <script>
  window.onload = function () {
   var Btn = document.getElementById('btn');
   Btn.onclick = function () {
    console.log("push the button ");
   }
  }
 </script>
</head>
<body>
 <button id="btn">計(jì)算</button>
</body>
</html>

解決辦法二：把js文件放在底部加載

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>事件</title>
</head>
<body>
 <button id="btn">計(jì)算</button>
 <script>
  var Btn = document.getElementById('btn');
  Btn.onclick = function () {
   console.log("push the button ");
  }
 </script>
</body>
</html>