vue.js - Why does using v-html provoke binding errors in a v-for loop? -

this works fine:

<li v-for="post in posts">   <a v-bind:href="post.url">{{post.title}}</a> </li> 

but if change (using v-html instead of template):

<li v-for="post in posts">   <a v-bind:href="post.url" v-html="post.title"/> </li> 

i error:

property or method "post" not defined on instance referenced during render. 

what's weird changing v-html syntax appears invalidate idea of there being post altogether because error being thrown on v-bind:href now. doesn't matter put in v-html attribute -- throw error anyway because mere existence of v-html appears eliminate post object, v-bind:href fails.

self closing tags not valid. use.

<li v-for="post in posts">   <a v-bind:href="post.url" v-html="post.title"></a> </li>