Alpine3 js 和 Larvavel

Question

我在尝试使以下代码正常工作时遇到了一些问题。我敢肯定我看不起一些简单的东西，但无法发现它

我的代码出现错误：Alpine 表达式错误：意外标记：字符串文字

<div 
    x-data="{ images: ['background-1.jpg', 'background-2.jpg'], index: 0}"
    x-init="index = Math.floor(Math.random() * images.length)">

    <div :style="'background-image: url(/img/' + $images[index]')'"></div>

Answer 1

您正在尝试使用混合 PHP-JS 语法。 JS 不需要变量的美元符号前缀（仅当您最初添加它们时）。

更正后的语法（图像周围有额外的单引号 URL）：

<div :style="'background-image: url(\'/img/' + images[index] + '\')'"></div>

或者我们也可以使用 JS template literals 以及 IMO 更具可读性的反引号 (`)：

<div :style="`background-image: url('/img/${images[index]}')`"></div>

Alpine3 js 和 Larvavel

Alpine3 js & Larvavel

laravel

alpine

alpine.js