How to write Vue data in html properties?

Question

For example, this will throw a Vue error:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/{{ form.screw.drive_image }}" >

I'm writing {{ form.screw.drive_image }} in the src prop.

It's not clear from Vue's warnings what I should do to solve.

Any idea?

:src="'<?=get_stylesheet_directory_uri(); ?>/images/' + form.screw.drive_image" > — Derek Pollard
– Derek Pollard, Commented Aug 20, 2018 at 13:30

Luca Reghellin · Accepted Answer · 2018-08-20 13:39:59Z

2

Thanks to Derek (see comments above), the correct answer is:

:src="'<?= get_stylesheet_directory_uri(); ?>/images/' + form.screw.drive_image"

Please note the followings:

:src is a shorthand for v-bind:src
<?= is a shorthand for <?php echo [...]
In this case Vue's data doesn't need braces
Computation in Vue's props is javascript, so in :src we are using + to concatenate

answered Aug 20, 2018 at 13:39

Luca Reghellin

8,19515 gold badges84 silver badges133 bronze badges

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

1 Comment

mix3d Over a year ago

Also reminder that Vue template {{...}} binding doesn't work in attributes, you need to use the : / v-bind: shortcut to denote an attribute that needs calculating/parsing vs a static string.

tony19 · Accepted Answer · 2022-07-16 01:09:21Z

1

You would use the v-bind shorthand, from the documentation:

Dynamically bind one or more attributes, or a component prop to an expression.

The format:

<img :src="'some_string' + some_data">

The final product:

<img :src="'<?=get_stylesheet_directory_uri(); ?>/images/' + form.screw.drive_image">

edited Jul 16, 2022 at 1:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 20, 2018 at 13:42

Derek Pollard

7,1856 gold badges45 silver badges62 bronze badges

Comments

José Matos · Accepted Answer · 2018-08-20 13:31:44Z

0

You should use

<img v-bind:src="form.screw.drive_image" />

and change the value of form.screw.drive_image to include get_stylesheet_directory_uri()

answered Aug 20, 2018 at 13:31

José Matos

6175 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to write Vue data in html properties?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related