CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2vue-component
joeydash
joeydash

Reputation: 81

How can I make a dropdown menu for font families using vue js?

I have the following select which contains font families that i want there to be applicable to my texts:

<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>

I tried to make a drop-down menu using Vue.js but I failed vigorously. Here's my data object:

data: {
  available_fonts: [
    "Pacifico", 
    "Dancing Script", 
    "Shadows Into Light", 
    "Lobster", 
    "Anton", 
    "Indie Flower", 
    "Charmonman", 
    "Kodchasan", 
    "Notable", 
    "Mali", 
    "Srisakdi", 
    "Slabo 27px"
  ]
}

Upvotes: 0

Views: 1426

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 3

Related Questions