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

我在一个Laravel应用程序中工作，正在绑定一个Laravel路由，以便可以在Vue组件中使用它。我正确地

v-bind

了index.blade.php文件中的路由，然后在Vue组件中的绑定

：href

中使用它，但我在控制台中遇到此错误：

错误Vue

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

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

---

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

您在样式绑定中误用了字符串模板语法，应该是这样的：

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

或

例如：

一,-

Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:“#应用程序”，
数据（）{
返回{
img:'https://picsum.photos/id/237/200/300'
}
}
})

#someDiv{
高度：300px；
宽度：200px；
}

乱数假文

我将您的第二个示例用于样式标记，但我得到了相同的错误。这是我的类中的锚定标记。vue```此外，我无法在vue初始化中设置

img

属性，因为img是使用从Laravels

Storage:：url（$announcement->image\u path）转换而来的
invitedClass.imagePath
动态呈现的

第二个解决方案应该有效。请检查我的第二个运行样本。我将在数据属性中设置什么值作为我的图像？我没有为我的图像使用静态值。谢谢，我认为错误实际上与我的路由绑定有关，而不是样式。你能再看看吗？我更新了问题中的错误

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