Is something like a dynamic v-model possible?

I have a v-for that renders n amount of elements that also contain a v-for that populates the with options. Now to my question. The has a v-model payload that needs to hold every value of every selected option. My problem is that everytime I select an option it overrides the other one and can't hold more than one - which makes sense if you think about it but how can I circumvent this?

        <div
          v-for="entry in filteredRoles"
          :key="entry.id"
          class="permission-form"
        >
          <h2>{{ entry.system_name }}</h2>
          <select v-model="payload" type="text" placeholder="system role">
            <option class="text-grey-50" value="" disabled selected>
              SELECT 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)">
            </button>
            <button
              class="accept"
              @click="
                acceptPermission(
                  fetchResponse.permissions[0].username,
                  entry.id,
                  role
                )
              "
            >
            </button>
          </div>
        </div>

This is the necessary code. payload is just an empty array. Does anyone know how to do this? Thank you in advance

luca-dev

3 years ago

Best Answer

Level 1

I found a suitable solution which may not be elegant but it works nontheless:

Template:

        <div
          v-for="(entry, index) in filteredRoles"
          :key="entry.id"
          :index="index"
          class="permission-form"
        >
          <h2>{{ entry.system_name }}</h2>
          <select
            v-model="payload[index]"
            type="text"
            placeholder="system role"
          >
            <option class="text-grey-50" value="" disabled selected>
              SELECT 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)">
            </button>
            <button
              class="accept"
              @click="
                acceptPermission(
                  fetchResponse.permissions[0].username,
                  entry.id,
                  index
                )
              "
            >
            </button>
          </div>
        </div>

As you can see I didn't change a lot. I added an index to the first loop and also added it to payload so that it's now payload[index]. But this isn't fully functional yet because we need a function that populates our array with empty entries so we can write data into the corresponding index.

Mounted function:

if (!this.$fetchState.pending) {
      this.fetchResponse.permissions.forEach(element => this.payload.push([]))
}

And that is all. Hope it can help someone in the future :)

Please or to participate in this conversation.