时间戳

首页 > 解决方案 > v-binding 内联样式不返回结果

javascript - v-binding 内联样式不返回结果

问题描述

我正在研究如何以内联样式进行 v-binding。我正在用 laravel + vue.js 构建一个混合应用程序。我已经尝试过了，但它仍然不起作用。在下面，我包含了我使用的数据和循环。谁能帮我处理这个问题？

 <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'
}]

标签： javascriptvue.jsvuejs2

解决方案

用这个代替

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

如您所见，双引号中的数据用作 java 脚本表达式。所以将字符串包装在反引号中作为模板表达式

推荐阅读