[Vuejs]-How to make text interpolation work inside css functions and router links

by

0👍

✅

I think you need to use the v-bind directive. This directive allows you to bind the value of an HTML attribute to a dynamic expression.

Here’s how you can modify your code to use the v-bind directive:

  <template>
     <RouterLink class="card" v-bind:to="link">
     <div class="card__background" v-bind:style="{ backgroundImage: `url(${image})` 
     }"></div>
    <div class="card__content">
      <h3 class="card__heading">{{ title }}</h3>
    </div>
   </RouterLink>

 </template>

 <script>
    import { RouterLink } from 'vue-router';
    export default {
    props: ['link', 'image', 'title'],
    created() {
    console.log(this.link)
    console.log(this.image)
    console.log(this.title)
    }
    }
 </script>

Leave a comment