Sé que es posible usar Map con v-for, pero digamos, ¿es posible usar los valores [clave, valor] como v-model?
Ex:
<input v-for="[key, value] in map" :key="key" v-model="key"></input> ... ... ... data(){ return { map: new Map([['cool thing 1', 'cool thing 2'], ...]) } }¿Vue3 admite esto de forma nativa?
Si no, ¿qué se podría hacer?
Para ser más precisos, quiero usar la clave y el valor como modelo v en las entradas.
Creo que Vue tiene solo dos limitaciones sobre lo que se puede usar con v-model
la expresión debe ser válida en el "lado izquierdo" para la asignación (porque v-model="xxx" es lo mismo que :value="xxx" @input="xxx = $event" )
Ambos pares (key, value) al iterar objetos y (value, index) al iterar matrices son variables temporales locales del ciclo, por lo que no tiene ningún sentido utilizarlas en el v-model . Si lo intenta, recibirá una advertencia: You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable.
Por lo tanto, debe dar un paso atrás y usar el objeto/matriz original con v-model
Matrices: v-model="arr[index]"
Objetos/Mapas: v-model="map[key]"
Mi idea es básicamente que el usuario puede ingresar tanto la clave como el valor de un mapa
Esa es una mala idea por varias razones. Primero, como se dijo antes, la variable key es una variable temporal local en el bucle, por lo que no es posible usarla en v-model . En segundo lugar (nuevamente, como se dijo antes), lo que sea que coloque dentro v-model debe ser "asignable". El objeto del Map no es asignable : debe usar un método set para establecer un valor de clave particular. Entonces v-model no es una opción aquí (debe usar eventos en su lugar). Además de eso, Map no permite claves duplicadas, por lo que permitir que los usuarios editen libremente las claves es la receta para una UX muy extraña...