使用字符串模板从laravel绑定路由值时Vue警告错误

Question

我正在一个Laravel中工作，并绑定一个laravel路由，以便它可以用于Vue组件中。我正确地v-bind了index.blade.php文件中的路由，然后在Vue组件中的绑定:href中使用它，但是我在控制台中得到了这个错误：

误差值

  [Vue warn]: Error compiling template:

invalid expression: Unexpected token ':' in

    http://myproject.local/classes/4

  Raw expression: v-bind:route="http://myproject.local/classes/4"

我的Classes.vue文件中使用的路由

<a :href="route" target="" class="card-image" :style="{ 'background-image': `url(${invitedClass.imagePath})`}"></a>

在index.blade.php中使用的路由绑定和vue组件

<div id="app">
 <classes :route="{{ route('classes.show',['id' => $invitedClass->id]) }}"></classes>                         
</div>

它似乎不喜欢我的vue组件中的冒号。

Answer 1

如果您在样式绑定中误用字符串模板语法，应该如下所示：

 :style="`background-image: url(${invitedClass.imagePath})`" 

或

 :style="{ 'background-image': 'url('+invitedClass.imagePath+')'}"

例子：

1-

​

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      img: 'https://picsum.photos/id/237/200/300'

    }
  }
})

#someDiv {
  height: 300px;
  width: 200px;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <div id="someDiv" :style="`background-image: url(${img})`">
    lorem ipsum
  </div>

</div>

​

二-

​

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      img: 'https://picsum.photos/id/237/200/300'

    }
  }
})

#someDiv {
  height: 300px;
  width: 200px;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <div id="someDiv"  :style="{ 'background-image': 'url('+img+')'}">
    lorem ipsum
  </div>

</div>

​