show/hide div 所选值
show/hide div on selected value
我在根据选定值更改变量时遇到问题。
<div x-data="{material_enabled : false}">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<div class="mt-1 sm:mt-0 sm:col-span-2">
<select @change="$event.target.value = 'Material fehlt' ? material_enabled=true : material_enabled=false" id="category" name="category" autocomplete="category" class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
<option value="" selected>Wähle einen Stillstandsgrund</option>
<option >ungeplanter Stillstand (Maschinenstillstand)</option>
<option >geplanter Stillstand (Instandhaltung geplant)</option>
<option >Rüsten</option>
<option >Wartung durch Mitarbeiter</option>
<option >Material fehlt</option>
</select>
</div>
</div>
<div x-show="material_enabled" class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label for="order_number" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
Auftragsnummer
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<input type="text" name="order_number" id="order_number" autocomplete="" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
value="{{ old('order_number', '') }}" />
@error('order_number')
<p class="text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
</div>
</div>
如果所选值为 'Material fehlt',我想将 x 数据块中的 material_enabled 变量更改为 true,但这不起作用。
谢谢,阿尔敏
您对 Material fehlt
的检查不正确。使用
@change="$event.target.value == 'Material fehlt'
没有
@change="$event.target.value = 'Material fehlt'
您将值与 ==
进行比较,然后将其分配给 =
。所以你做的不是比较。
这是我使用的完整示例:
<html>
<head>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"
defer
></script>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div x-data="{material_enabled : false}">
<div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<select
@change="$event.target.value == 'Material fehlt' ? material_enabled=true : material_enabled=false"
id="category"
name="category"
autocomplete="category"
class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
>
<option value="" selected>Wähle einen Stillstandsgrund</option>
<option>ungeplanter Stillstand (Maschinenstillstand)</option>
<option>geplanter Stillstand (Instandhaltung geplant)</option>
<option>Rüsten</option>
<option>Wartung durch Mitarbeiter</option>
<option>Material fehlt</option>
</select>
</div>
</div>
<div class="mt-4">
Value of <strong>material_enabled</strong>:
<span x-text="material_enabled"></span>
</div>
</div>
</body>
</html>
我在根据选定值更改变量时遇到问题。
<div x-data="{material_enabled : false}">
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<div class="mt-1 sm:mt-0 sm:col-span-2">
<select @change="$event.target.value = 'Material fehlt' ? material_enabled=true : material_enabled=false" id="category" name="category" autocomplete="category" class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
<option value="" selected>Wähle einen Stillstandsgrund</option>
<option >ungeplanter Stillstand (Maschinenstillstand)</option>
<option >geplanter Stillstand (Instandhaltung geplant)</option>
<option >Rüsten</option>
<option >Wartung durch Mitarbeiter</option>
<option >Material fehlt</option>
</select>
</div>
</div>
<div x-show="material_enabled" class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<label for="order_number" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
Auftragsnummer
</label>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<input type="text" name="order_number" id="order_number" autocomplete="" class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
value="{{ old('order_number', '') }}" />
@error('order_number')
<p class="text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
</div>
</div>
如果所选值为 'Material fehlt',我想将 x 数据块中的 material_enabled 变量更改为 true,但这不起作用。
谢谢,阿尔敏
您对 Material fehlt
的检查不正确。使用
@change="$event.target.value == 'Material fehlt'
没有
@change="$event.target.value = 'Material fehlt'
您将值与 ==
进行比较,然后将其分配给 =
。所以你做的不是比较。
这是我使用的完整示例:
<html>
<head>
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"
defer
></script>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div x-data="{material_enabled : false}">
<div
class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
>
<div class="mt-1 sm:mt-0 sm:col-span-2">
<select
@change="$event.target.value == 'Material fehlt' ? material_enabled=true : material_enabled=false"
id="category"
name="category"
autocomplete="category"
class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
>
<option value="" selected>Wähle einen Stillstandsgrund</option>
<option>ungeplanter Stillstand (Maschinenstillstand)</option>
<option>geplanter Stillstand (Instandhaltung geplant)</option>
<option>Rüsten</option>
<option>Wartung durch Mitarbeiter</option>
<option>Material fehlt</option>
</select>
</div>
</div>
<div class="mt-4">
Value of <strong>material_enabled</strong>:
<span x-text="material_enabled"></span>
</div>
</div>
</body>
</html>