vue v-for

by simati

HTML

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<div class="col-sm-4 border-right">
    <div v-for="(tag, key) in tags">{{key}}
        <button @click.prevent="" 
                v-for="key in tag"
                :key="key">
            {{key.value}}
        </button>
    </div>
</div>
</div>

JavaScript

let tags  = {
    Investor: [
        {display: "Mutual Fund", value: 'Mutual Fund'},
        {display: "Insurance", value: 'Insurance'},
        {display: "FII", value: 'FII'},
        {display: "PMS", value: 'PMS'},
        {display: "Proprietary", value: 'Proprietary'},
        {display: "HNI", value: 'HNI'},
        {display: "Private Equity", value: 'Private Equity'},
        {display: "Others", value: 'Others'}
    ],
    Research: [
        {display: "Global", value: 'Global'},
        {display: "Domestic", value: 'Domestic'},
        {display: "Retail", value: 'Retail'},
        {display: "Others", value: 'Others'}
    ],
    Corporate: [
        {display: "Corporate", value: 'Corporate'}
    ],
    Others: [
        {display: "Debt", value: 'Debt'},
        {display: "Debt Adviser", value: 'Debt Adviser'},
        {display: "Investment Banker", value: 'Investment Banker'},
        {display: "Media", value: 'Media'},
        {display: "Others", value: 'Others'}
    ]
}

new Vue({
  el: '#app',
  data: {
    tags 
  }
})