CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Frauds
Frauds

Reputation: 137

v-binding inline style returns no result

I'm looking at how to do v-binding in inline style. I am building a hybrid application with laravel + vue.js. I've tried it but it still doesn't work. In below I have included the data I used and the loops. Can anyone help me deal with this?

 <div class="col-4 list-item" v-for="item in searchResult">
     <div class="cards cards--thumbnail">
         <div class="cards__content">
              <div class="image" :style="background-image: url('item.image');"> //this is the inline style that I mean
                  <div class="image__logo">
                      <img :src="item.image_course" alt="" class="img-fluid">
                  </div>
               </div>
               <div class="location">
                   <div class="tags tags--blue">{{ item.location }}</div>
                   <div class="tags tags--pink">Rp.{{ item.price }},-/ Session</div>
               </div>
               <div class="name">
                   <div class="title title--p17">{{ item.name }}</div>
               </div>
         </div>
    </div>
</div>

items: [{
   name: 'Primagama Jakarta Timur',
   image: 'images/e-learning/shutterstock_1676998306.png',
   image_course: '/images/primagama.png',
   price: '100.000',
   location: 'Jakarta Timur',
   grade:'elementary',
   course:'elearning'
}]

Upvotes: 0

Views: 32

Answers (1)

Ashwin Bande
Ashwin Bande

Reputation: 3053

replace with this

<div class="col-4 list-item" v-for="item in searchResult">
     <div class="cards cards--thumbnail">
         <div class="cards__content">
              <div class="image" :style="`background-image: url('${item.image}');`"> //this is the inline style to edit
                  <div class="image__logo">
                      <img :src="item.image_course" alt="" class="img-fluid">
                  </div>
               </div>
               <div class="location">
                   <div class="tags tags--blue">{{ item.location }}</div>
                   <div class="tags tags--pink">Rp.{{ item.price }},-/ Session</div>
               </div>
               <div class="name">
                   <div class="title title--p17">{{ item.name }}</div>
               </div>
         </div>
    </div>
</div>

As you can see data in double quotes work as java script expression. so wrap string in back tick as template expression

Upvotes: 1

Related Questions