vuejs pass data to template html attributes

Question

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 ?

tony19 · Accepted Answer · 2022-07-15 22:06:41Z

8

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"

edited Jul 15, 2022 at 22:06

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 27, 2018 at 14:52

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuejs pass data to template html attributes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related