[Vuejs]-How can I make a dropdown menu for font families using vue js?

by

3👍

You could check the following solution, So bind your select input to data object property called focused_font via the directive v-model, each option in that select contains a font family name which in turns is applicable to that option, i added some text in order to see the select effect by binding the style via :style="{fontFamily : focused_font}". 

new Vue({
  el: '#app',
 data: {
    focused_font:'',
    available_fonts: ["Pacifico", "Dancing Script", "Shadows Into Light", "Lobster", "Anton", "Indie Flower", "Charmonman", "Kodchasan", "Notable", "Mali", "Srisakdi", "Slabo 27px"]
    }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" >
<div id="app">
<select v-model="focused_font">
    <option value="" disabled selected>Font</option>
    <option v-for="font in available_fonts" v-bind:value="font" v-bind:style="{fontFamily : font}" >{{ font }}</option>
</select>

<p :style="{fontFamily : focused_font}">Some text to test font</p>
</div>
👤Boussadjra Brahim

Leave a comment