Как сделать выпадающее меню для семейств шрифтов, используя vue js?

Question

У меня есть следующее select, которое содержит семейства шрифтов, которые я хочу применить к моим текстам:

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

Я пытался создать выпадающее меню, используя Vue.js, но у меня не получилось.Вот мой объект данных:

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

Answer 1

Вы можете проверить следующее решение, поэтому свяжите свой вход select со свойством объекта данных, называемым focused_font, с помощью директивы v-model, каждый option в этом select содержит имя семейства шрифтов, которое, в свою очередь, являетсяприменимо к этой опции, я добавил текст, чтобы увидеть эффект выбора, связав стиль с помощью :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>