実現したいこと
select の初期色を変えたい。
前提
laravelとvueで選択できるサイトを作っています。全体的に茶色テーストでいきたいと思い、各種初期色を変更していますが、select option部分は、変更できません。変更の方法を教えていただきたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。
賞味期限と都道府県部分を選択した時に出てくる、初期色を変更したい。
<script setup> import { onMounted, ref,watch } from 'vue' import BreezeAuthenticatedLayoutOwner from '@/Layouts/AuthenticatedLayoutOwner.vue'; import Pagination from '@/components/Pagination.vue'; import { Link,Head } from '@inertiajs/inertia-vue3'; const props = defineProps({ price_from:Array, price_until:Array, expiry_date:Array, prefs:Array, products: Object }) const price_from = ref('') const price_until = ref('') const expiry_date = ref('') const pref = ref('') // ref の値を取得するには .valueが必要 const searchCustomers = () => { Inertia.get(route('user.dashboard', { price_from: price_from.value },{ price_until: price_until.value },{ expiry_date: expiry_date.value },{ pref: pref.value })) } onMounted(() => { console.log(props.products.data) }) </script> <template> <Head title="Dashboard" /> <BreezeAuthenticatedLayoutOwner> <div class="p-sub-hero"> <div class="p-sub-hero__inner"> <h2 class="c-heading-primary c-heading-primary--white">PRODUCT LIST<span class="c-heading-primary__sub">商品一覧</span></h2> </div> </div> <main class="l-contents"> <section class="p-input-form l-section" style="padding-top:10px;"> <div class="p-input-form__inner l-inner"> <div class="p-input-form__body" style="padding-top:10px; padding-bottom: 10px;"> <div class="c-form__item"> <label for="name" class="c-product__title">詳細検索</label> <form method="get" :href="route('user.dashboard')" class="c-form p-form__login"> <!--価格での検索--> <ul class="p-form--list"> <li class="p-form--item" style="margin-bottom:5px;"> <input type="number" placeholder="下限なし" class="c-text" name="price_from" v-model="price_from">円〜 </li> <li class="p-form--item"> </li> <li class="p-form--item"> <input type="number" placeholder="上限なし" class="c-text" name="price_until" v-mode="price_until">円 </li> <li class="p-form--item"> </li> </ul> <!--賞味期限での検索--> <div class=" c-text u-border__none"> <div class="c-form__title">賞味期限</div> <select v-model="selected" name="expiry_date" v-mode="expiry_date" class="c-text"> <option>１日未満</option> <option>１日以上</option> </select> </div> <!--都道府県での検索--> <div class=" c-text u-border__none"> <div class="c-form__title">都道府県</div> <select id="pref" name="pref" class="c-text" v-model="pref"> <option :value="pref" :key="index" v-for="(pref,index) in prefs"> {{ pref }} <!--@foreach($prefs as $pref ) <option value="{{ $pref }}" @if(old('prefecture') === $pref) selected @endif>{{$pref}}</option> @endforeach--> </option> </select> </div> <div class=""> <input type="submit" value="検索する" class="c-btn c-btn--search" @click="searchCustomers"> </div> </form> </div> </div> </div> </section> <section class="p-products-list-wrapper l-section" style="padding-top:0;"> <div class="l-inner"> <div class="c-product-wrapper c-product-wrapper--col3"> <div class="c-product" v-for="product in props.products.data" :key="product.id"> <Link :href="route('owner.products.show', {id : product.id })"> <div class="c-product__buy"> <span v-if="product.status == 1">購買予約済</span> <span v-if="product.status !== 1"><br></span> <!---割引計算の表示--> <div class="c-product__discount-express"> {{ parseInt(100-((product.price/product.regular_price) * 100)) }}%OFF </div> <!---画像の表示--> <div class="c-product__img-wrapper"></div> <img src="/images/no_image.jpg" v-if='!(product.image)' type="products" /> <img :src="`/storage/products/${product.image}`" v-if='product.image' type="products" /> </div> <div class="c-product__body"> <h1 class="c-product__caption" style="font-weight: bold;">{{ product.name }}</h1> <h3 class="c-product__caption">賞味期限 {{ product.expiry_date }}</h3> <p class="c-product__caption">{{ (product.price).toLocaleString() }}<span class="text-sm text-gray-700">円(税込)</span></p> </div> </Link> </div> </div> </div> <!---ページネーション--> <Pagination :links="products.links"></Pagination> </section> </main> </BreezeAuthenticatedLayoutOwner> </template>
試したこと
CSSをいじったりしましたが、変更できません。調べてみると、JSで変更する必要があるかもしれないとも思ったりしています。
0 コメント