無法找到屬性

我有一個非常簡單的VueJS本地設置，並且運行一個簡單的示例時出現問題，該示例顯示瞭如何輸出原始HTML。我不包括JS Fiddle的鏈接，因爲我只想使它在本地安裝程序上工作，有時我的例子在JS Fiddle上工作，但不在本地機器上工作。無法找到屬性

總之，這裏的html代碼：

<html> 
<head> 
    <script src="https://unpkg.com/vue"></script> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div id="app"> 
    <!-- Doesn't work! --> 
    <p>{{ link }}</p> 
    <!-- This works! --> 
    <p v-html>{{ link }} </p> 
    </div> 
</body> 
</html>

這是我的app.js文件：

window.addEventListener('load', function(){ 
    new Vue({ 
     el: '#app', 
     data: { 
      link: '<a href="http://google.com">Google</a>' 
     } 
    }); 
});

現在，當我打開窗戶，我得到兩次出現以下錯誤：

[Vue warn]: Property or method "link" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <Root>)。

任何想法我錯了？

來源

2017-06-06 dotslash

你可以試試這個，看看它是否按要求工作。我在主體後移動了腳本。

<html> 
<head> 
</head> 
<body> 
    <div id="app"> 
    <!-- Doesn't work! --> 
    <p>{{ link }}</p> 
    <!-- This works! --> 
    <p v-html>{{ link }} </p> 
    </div> 
</body> 
    <script src="https://unpkg.com/vue"></script> 
    <script src="app.js"></script> 
</html>

來源

2017-06-06 04:45:07 zapping

是的，先生！現在工作。但是，爲什麼當我使用'load'事件？或者我應該把它包裝在jQuery的'$（document）.ready'中？ – dotslash

如果您確實使用jQuery，那麼將它與doc一起使用會更好。但是我發現最好在沒有載入事件或文檔準備就緒的情況下使用腳本。您有時可能會看到{{link}}閃爍一段時間。在這種情況下，只需使用[v-clock]指令。 https://medium.com/vuejs-tips/v-cloak-45a05da28dc4 – zapping

無法找到屬性

回答

相關問題