Reputation: 8101

How to write Vue data in html properties?

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?

Upvotes: 1

Answers (3)

Reputation: 7165

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">

Upvotes: 1

Reputation: 8101

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

Upvotes: 2

Reputation: 1

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()

Upvotes: 0