英文:
Blade component not showing using Alpinejs
问题
I tried to create a simple Laravel app with Alpine.js installed locally via Yarn. I followed a simple example from YT about creating Laravel blade components and it's working fine using the CDN version. But, not working on Alpine.js installed locally, and got the error below.
resources/views/components/input/group.blade.php
@props(['label', 'error' => null])
<div x-data x-id="[‘input’]" {{ $attributes }}>
<label x-bind:for=" $id('input') " {{ $attributes->class('block mb-2 text-sm font-medium text-gray-900') }}>
{{ $label }}
</label>
{{ $slot }}
</div>
@if ($error)
<div class="text-sm text-red-600 !mt-1">{{ $error }}</div>
@endif
resources/views/components/input/select.blade.php
@aware(['error'])
@props(['error' => null])
<div>
<select x-bind:id=" $id('input') "
{{ $attributes->class([
'bg-gray-50 border text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5',
'border-gray-300' => !$error,
'border-red-500' => $error,
]) }}>
{{ $slot }}
</select>
</div>
index.blade.php
<!DOCTYPE html>
<html lang="en" class="min-w-[300px]">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<script src="{{ mix('js/alpine.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/tailwind.css') }}">
</head>
<body class="flex flex-col items-center">
@verbatim
<div class="max-w-[768px] min-h-screen bg-cover bg-center bg-black">
<div class="p-8">
<img src="test.jpg">
<div x-data="alpineMixin" x-cloak class="space-y-3">
<x-input.group label="Your Age" class="text-white" :error="$errors->first('age')">
<x-input.select x-model="profile.age" name="age">
<template x-for="n in 53" :key="n">
<option :value="n + 17" x-text="n === 53 ? '70+' : n + 17" :selected="profile.age == n + 17"></option>
</template>
</x-input.select>
</x-input.group>
</div>
</div>
</div>
@endverbatim
<script src="/js/manifest.js"></script>
</body>
</html>
Please note that I want to use Alpine.js installed via Yarn.
英文:
I tried to create a simple Laravel app with Alpinejs installed locally via Yarn. I followed a simple example from YT about creating Laravel blade components and it's working fine using the CDN version. But, not working on Alpinejs installed locally, and got the error below. 
resources/views/components/input/group.blade.php
@props(['label', 'error' => null])
<div x-data x-id="['input']" {{ $attributes }}>
<label x-bind:for="$id('input')" {{ $attributes->class('block mb-2 text-sm font-medium text-gray-900') }}>
{{ $label }}
</label>
{{ $slot }}
</div>
@if ($error)
<div class="text-sm text-red-600 !mt-1">{{ $error }}</div>
@endif
resources/views/components/input/select.blade.php
@aware(['error'])
@props(['error' => null])
<div>
<select x-bind:id="$id('input')"
{{ $attributes->class([
'bg-gray-50 border text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5',
'border-gray-300' => !$error,
'border-red-500' => $error,
]) }}>
{{ $slot }}
</select>
</div>
index.blade.php
<!DOCTYPE html>
<html lang="en" class="min-w-[300px]">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<script src="{{ mix('js/alpine.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/tailwind.css') }}">
</head>
<body class="flex flex-col items-center">
@verbatim
<div class="max-w-[768px] min-h-screen bg-cover bg-center bg-black">
<div class="p-8">
<img src="test.jpg">
<div x-data="alpineMixin" x-cloak class="space-y-3">
<x-input.group label="Your Age" class="text-white" :error="$errors->first('age')">
<x-input.select x-model="profile.age" name="age">
<template x-for="n in 53" :key="n">
<option :value="n + 17" x-text="n === 53 ? '70+' : n + 17"
:selected="profile.age == n + 17"></option>
</template>
</x-input.select>
</x-input.group>
</div>
</div>
</div>
@endverbatim
<script src="/js/manifest.js"></script>
</body>
</html>
> Please note that I want to use alpinejs installed via yarn.
答案1
得分: 0
Sure, here is the translated content:
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine-ie11.min.js" integrity="sha512-Atu8sttM7mNNMon28+GHxLdz4Xo2APm1WVHwiLW9gW4bmHpHc/E2IbXrj98SmefTmbqbUTOztKl5PDPiu0LD/A==" crossorigin="anonymous"></script>
You should try using the above CDN link in your index blade.
英文:
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine-ie11.min.js" integrity="sha512-Atu8sttM7mNNMon28+GHxLdz4Xo2APm1WVHwiLW9gW4bmHpHc/E2IbXrj98SmefTmbqbUTOztKl5PDPiu0LD/A==" crossorigin="anonymous"></script>
you should try this above link CDN in your index blade
答案2
得分: 0
Removing the @verbatim solves my issue. I think it's interfering with the rendering of Alpinejs components preventing the dynamic behavior from working correctly.
英文:
Hmmm, removing the @verbatim solves my issue. I think it's interfering with the rendering of Alpinejs components preventing the dynamic behavior from working correctly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论