<template>
<div class="home">
<div>
<input v-model='newName' />
<button @click='add'>
add
</button>
<ul>
<li v-for='name of names' :key='name' @click='remove(name)' >
{{ name }}
</li>
</ul>
</div>
</div>
</template>
<script>
import { ref, computed } from 'vue'
import { useMap } from 'vx-hook'
export default {
setup(){
const newName = ref('')
const [ map, { get, set, remove } ] = useMap([
[ 'Rogen', 1 ],
[ 'Coco', 2 ],
[ 'Jim', 3 ]
])
const names = computed(() => [ ...map.keys() ])
const add = () => set(newName, names.value.length)
return {
newName,
names,
remove
}
}
}
</script>