基本 Vue.js 示例不起作用答案

【问题标题】：Basic Vue.js example not working基本 Vue.js 示例不起作用
【发布时间】：2018-06-03 08:07:32
【问题描述】：

我有这个超级基础的起点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>

    <link rel="stylesheet" type="text/css" href="Content/dictionary.css" />

    <script src="Scripts/kuroshiro.min.js"></script>
</head>
<body>
    <div id="searchResultsVue">
        <table>
            <tr v-for="r in results">
                {{ r.Result.ent_seq }}
            </tr>
        </table>
    </div>


    <script src="https://vuejs.org/js/vue.js"></script>
    <script>


        var searchResultsVue = new Vue({
            el: '#searchResultsVue',
            data: { results: [{ Result: { ent_seq: 'asd' } }] }
        });
    </script>
</body>
</html>

但我明白了

[Vue 警告]：属性或方法“r”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

我不明白

【问题讨论】：

标签： javascript data-binding vue.js

【解决方案1】：

这是 HTML 的宽松渲染实践的问题。当它为一个表构建 Dom 元素时，它需要一个特定的结构，并且任何偏离该结构的东西都会被推到定义之外。

所以

    <table>
        <tr v-for="r in results">
            {{ r.Result.ent_seq }}
        </tr>
    </table>

行为类似

    <table>
        <tr v-for="r in results">
        </tr>
    </table>
    {{ r.Result.ent_seq }}

错误是它在循环外看到对循环变量的调用。

As seen in this fiddle 在代码周围添加表定义标签会阻止它被推送。

【讨论】：

【解决方案2】：

你必须在 tr 中使用 td 标签。似乎 table-rows 有什么特别的地方

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="searchResultsVue">
        <table>
            <tr v-for="r in results">
                <td>{{ r.Result.ent_seq }}</td>
            </tr>
        </table>
    </div>


    <script src="https://vuejs.org/js/vue.js"></script>
    <script>
        var searchResultsVue = new Vue({
            el: '#searchResultsVue',
            data: { results: [{ Result: { ent_seq: 'asd' } }] }
        });
    </script>
</body>
</html>

【讨论】：

【解决方案3】：

您需要修复您的标记。 tr 需要 td 作为它的孩子才能正常工作。

<tr v-for="r in results">
  <td>{{ r.Result.ent_seq }}</td>
</tr>

【讨论】：