Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

luca-dev's avatar

"selected" prop not working with v-model (?)

          <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?

0 likes
1 reply
hamzaaslam's avatar

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.

Please or to participate in this conversation.