无法找到属性

问题描述：

我有一个非常简单的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>)。

任何想法我错了？

答

你可以试试这个，看看它是否按要求工作。我在主体后移动了脚本。

<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>

是的，先生！现在工作。但是，为什么当我使用'load'事件？或者我应该把它包装在jQuery的'$（document）.ready'中？ – dotslash

如果您确实使用jQuery，那么将它与doc一起使用会更好。但是我发现最好在没有载入事件或文档准备就绪的情况下使用脚本。您有时可能会看到{{link}}闪烁一段时间。在这种情况下，只需使用[v-clock]指令。 https://medium.com/vuejs-tips/v-cloak-45a05da28dc4 – zapping

相关推荐