I know it is possible to use Map with v-for, but say, is it possible to use the values [key, value] as 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'], ...])
}
}
Does Vue3 support this natively?
If not, what could be done?
To be more precise i want to use the key and value thenselves as v-model in inputs
I think Vue has only two limitations on what can be used with v-model
the expression must be valid "left side" for assignment (because v-model="xxx" is same as :value="xxx" @input="xxx = $event")
Both pairs - (key, value) when iterating objects and (value, index) when iterating arrays are local temp variables of the loop so it does not make any sense to use them in the v-model. If you try that you will get a warning: 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.
So you need to make a step back and use the original object/array with v-model
Arrays: v-model="arr[index]"
Objects/Maps: v-model="map[key]"
My idea its basically the user can input both key and value for a map
That is a bad idea for a few reasons. First, as said before key variable is a local temp variable in the loop so using it in v-model is not possible. Second (again - as said before) whatever you put inside v-model must be "assignable". Map object is not assignable - you must use a set method to set a value of particular key. So v-model is not an option here (you must use events instead). On top of that, Map does not allow duplicate keys so letting users freely edit the keys is recipe for a very weird UX....