Как скрыть текстовое поле, если выбрано любое из опций

Question

<div class="flex w-full">
            <select placeholder="Sort By" v-model="criminal.sortBy" class="bg-grey-lightest border p-2 border-gray mr-4 h-10 w-1/2 rounded-sm font-basic mt-2 mb-4">
                <option>----------------------------</option>
                <option value="1">Most Wanted</option>
                <option value="2">Last Seen</option>
                <option value="3">Very Popular</option>
                <option value="4">Sort By Bounty/Reward</option>
            </select>

            <select placeholder="Country of Origin" v-model="criminal.country" class="bg-grey-lightest border p-2 border-gray mr-4 h-10 w-full rounded-sm font-basic mt-2 mb-4">
                <option >--------------</option>
                @foreach ($countries as $country)
                <option value="{{  $country->id }}">{{ $country->name }}</option>
                @endforeach
            </select>
        </div>
        <p class="font-bold text-md">or</p>


        <div class="flex">
            <input  v-show="criminalName = true" placeholder="Search by Name" type="text" v-model="criminal.name" class="bg-grey-lightest border p-2 border-gray mr-4 h-10 w-full rounded-sm font-basic mt-2 mb-4">
        </div>

Таким образом, это будет отображать это

Мне нужна помощь. Я хочу скрыть текстовое поле, если один из выбранных поле выделено

, поэтому, если выбрано первое поле выбора ..., затем скрыть текстовое поле .. вот и все

data () {
        return {    
            criminalName : false , 
            criminal :{ 
                sortBy: "",
                country: null,
                name : "",
                state: ""
            },
            group : { 
                name : "",
                country : "",
            }
        }
    },

Answer 1

Поскольку v-model элементов выбора равны criminal.sortBy и criminal.country соответственно, вы можете отобразить элемент ввода, если ни один из них не имеет установленного значения:

<input v-show="criminalName && !criminal.sortBy && !criminal.country">

У вас изначально было criminalName = true что неверно, я думаю, вы имели в виду criminalName === true, который можно упростить до criminalName.