CODEWITHSUNDEEP
javascriptknockout.jsvue.js
pistacchio
pistacchio

Reputation: 58903

Vue.js Bindings in comments

One very useful feature of Knockout.js is the ability to put bindings in comments. For example, if I want a <ul> tag with some dynamically generated <li> tags plus the last one that is "Add new Item", in Knockout.js I can do like:

<ul class="list-group">
    <!-- ko foreach: items -->
        <li><a class="list-group-item" data-bind="text: itemtext"></a></li>
    <!-- /ko -->
    <li><a class="list-group-item list-group-item-info" data-bind="click: $root.charactersView.addCharacter">Add new Item</a></li>
</ul>

How to do such a thing in Vue.js? Thanks

Upvotes: 0

Views: 446

Answers (1)

nils
nils

Reputation: 27204

You can use the v-for directive to loop through the list items and just leave the "Add new Item" in there at the end.

<ul class="list-group">
    <li v-for="item in items">
        <a class="list-group-item" v-text="item.itemtext"></a>
    </li>
    <li>
        <a class="list-group-item list-group-item-info" @click="$root.charactersView.addCharacter">Add new Item</a>
    </li>
</ul>

Upvotes: 2

Related Questions