Question

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

知道我哪里出错了吗？

Answer 1

你可以尝试一下，看它是否按要求运作。我把脚本移到了身体后面。

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

无法找到物业

1 个答案: