显示/隐藏所选值的 div答案

【问题标题】：show/hide div on selected value显示/隐藏所选值的 div
【发布时间】：2021-02-02 08:27:40
【问题描述】：

我在根据所选值更改变量时遇到问题。

<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-data 块的 material_enabled 变量更改为 true，但这不起作用。

谢谢，阿明

【问题讨论】：

标签： laravel laravel-blade alpine.js

【解决方案1】：

您对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>

【讨论】：