I am migrating my vue 2 application into vue 3. While exploring position api, i came to know about ref function in setup hook which is replacing data function of option api.

In vue 2:

data() {
  return {
   cntmap: new Map()
  }
}

I am not sure how to initialize it in ref function of setup hook. I have started learning vue 3.

I am migrating my vue 2 application into vue 3. While exploring position api, i came to know about ref function in setup hook which is replacing data function of option api.

In vue 2:

data() {
  return {
   cntmap: new Map()
  }
}

I am not sure how to initialize it in ref function of setup hook. I have started learning vue 3.

• javascript
• vue.js
• vuejs3

1 Answer 1

Try like following snippet:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const mapList = ref(new Map())
    
    mapList.value.set('a', 1);
    mapList.value.set('b', 2);
    mapList.value.set('c', 3);

    return { mapList }
  }
})
app.mount('#demo')

<script src="https://unpkg./[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
  <li v-for="item in mapList" :key="item">
    {{ item }}
  </li>
</div>