How to get string parsed in html properties on a Vue js x-template?

Question

a thing like this won't be correctly parsed. {{ item.post_permalink }} will not be substituted by the passed-in text, while {{ item.read_label }} will be correctly parsed.

<script type="text/x-template" id="news-template">
   <a href="{{ item.post_permalink }}" class="read-more">{{ item.read_label }}</a>
</script>

how to solve? It seem's it's somewhat related about being inside an html property

Answer 1

You should use v-bind to dynamically bind the attribute values not {{ }}

So do it like this:

   <script type="text/x-template" id="news-template">
       <a v-bind:href="item.post_permalink" class="read-more">{{ item.read_label }}</a>
    </script>

or shorthand for v-bind is : like this:

   <script type="text/x-template" id="news-template">
       <a :href="item.post_permalink" class="read-more">{{ item.read_label }}</a>
    </script>