CODEWITHSUNDEEP
vue.js
Isador
Isador

Reputation: 603

vuejs pass data to template html attributes

I'm very new to Vuejs. I see how to pass data (variables) into components, but in my code I need to get thoses variables in the HTML attributes of the template.

Here my HTML : 

<div id="activities" class="row text-center activities">
     <myimage text="{{ art_text }}" type="art"></myimage>
</div>

Here my Vuejs code (delimiters changed, because of Twig) : 

<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>

<script type="text/javascript">

    Vue.component('myimage', {
        delimiters: ['${', '}'],
        props: ['text', 'type'],
        template: '<div class="col-lg-3 col-md-3" style="padding-top: 20px;"><h3><a title="${text}" href="#"><span> <img style="width:220px;" alt="Image ${type}"> </span></a></h3><span>${text}</span></div>'
    });

    new Vue({
        el: '#activities'
    });
</script>

But for example, in my template I don't see why "title" attribute don't get the variable ${text} ...

Is there another way to pass data from custom element to HTML attributes of the template ?

Upvotes: 5

Views: 14381

Answers (1)

acdcjunior
acdcjunior

Reputation: 135822

The problem is:

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

Also, per docs:

Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive.

So, instead of title="${text}" (which is, because you are using custom delimiters, the equivalent of title="{{ text }}"),

Use:

v-bind:title="text"

Or v-bind's shorthand:

:title="text"

Upvotes: 8

Related Questions