Basic Vue.js example not working

0
votes

I have this super basic starting point:

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

but I get

[Vue warn]: Property or method "r" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

I don't understand

3
javascriptdata-bindingvue.js

3 Answers

1
votes

This is an issue with HTML's lenient rendering practices. When it's building the Dom elements for a table it's expecting a certain structure and anything deviating from that structure is pushed outside the definitions.

And so

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

Acts like

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

The Error is then that it is seeing the call to the loop variable outside the loop.

As seen in this fiddle Adding a table definition tag around your code stops it from being pushed.

1
votes

You need to fix your markup. tr needs td as its child to work properly.

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

You have to use the td tag inside tr. It seems there is something special about 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>