Level 1
if you want o select an option by default for a select tag in vue please set it's value in v-modal of select tag as per option value.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
<div
v-for="(entry, index) in fetchCopy"
:key="entry.id"
:index="index"
class="permission-form"
>
<h2>{{ entry.system_name }}</h2>
<select v-model="payload[index]" type="text">
<option
v-if="entry.system_role !== null"
:value="entry.system_role"
disabled
>
{{ entry.system_role }}
</option>
<option v-for="role in entry.roles" :key="entry.id" :value="role">
{{ role }}
</option>
</select>
<div class="permission-buttons">
<button
class="deny"
@click="denyPermission(entry.id), disableOption(entry.id)"
>
</button>
<button
class="accept"
@click="
acceptPermission(
fetchResponse.permissions[0].username,
entry.id,
index
),
disableOption(entry.id)
"
>
</button>
</div>
</div>
I have a v-for that renders some selects with options (the options are rendered through a v-for too). Now I want to have the first as a pre-selected option but it doesn't work and I already read through some StackOverflow posts, these didn't help because they didn't fix my problem. Can anyone explain to me how to get to the solution?
Edit: I'm puzzled because it works on a different code from my page:
<select
v-model="systemInfo.privacy_class"
class="w-full p-0"
type="text"
>
<option class="text-grey-50" value="" disabled selected>
SELECT LEVEL
</option>
<option value="LEVEL1">LEVEL1</option>
<option value="LEVEL2">LEVEL2</option>
<option value="LEVEL3">LEVEL3</option>
</select>
Does this work because there is no v-for involved?
Please or to participate in this conversation.