Ad
Vue.js - Interpolation Error - How To Rework Style To V-bind:style?
I am currently getting this console error message:
interpolation in "style" attribute will cause the attribute to be discarded in Internet Explorer. Use v-bind:style instead.
Which is caused by this piece of code:
<div class="placeholder-img"
style="background-image: url({{ travel._source.field_image[0].url }})">
Now I don't know how to change this to proper syntax, it would not be hard if the background image didn't contain the url() part but now I am a bit confused on how to properly refactor this. Could anybody help me out?
Cheers.
Ad
Answer
<div class="placeholder-img"
v-bind:style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')' }">
When using shorthand for v-bind:
<div class="placeholder-img"
:style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')' }">
When using ES6 syntax:
<div class="placeholder-img"
:style="{ 'background-image': `url(${travel._source.field_image[0].url})` }">
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad