Is there a way to create a dropdown selection for font families with vue js?

Here is a select element with font families that I want to apply 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 attempted to create a dropdown menu using Vue.js but encountered difficulties. Below is my data object:

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

Answer â„–1

If you want to implement a solution, consider linking your select input to a data object property named focused_font through the directive v-model. Each option in the dropdown contains a specific font family name which is applied to that option. To visualize the effect of selecting a font, you can bind the style dynamically using 

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sorting rows dynamically with jQuery Tablesorter

I've been struggling to find a solution for my specific issue. I need to have a static row in a large table that will not sort or move, allowing for repeated headers. Can anyone offer assistance with this? $("#dataTable").tablesorter({ ...

javascriptjqueryhtmlhtml-tabletablesorter

What is the best way to ensure consistent spacing between columns in a Bootstrap 3 grid layout, similar to the spacing on the left and right sides?

Is there a way to achieve equal spacing between all blocks in a row, similar to the left and right padding that Bootstrap automatically applies? Currently, Bootstrap adds padding to all columns on both sides, but does not render extra spacing on the left s ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Rebuilding Javascript Files in Your Project with Laravel 9

I recently set up a Laravel 9 project on my Mac and am looking to incorporate Vue components. The default Laravel installation includes a Vue component (js/Components/ExampleComponenets.vue) which I successfully displayed in a view file. Wanting to custom ...

javascriptlaravelvue.js

Unable to properly connect my CSS file to the header partial

I am struggling to include my CSS file in the header partial Here is the link I am using: <link rel="stylesheet" href="stylesheets/app.css"> This is what my directory structure looks like: project models node_modules public stylesh ...

javascripthtmlcss

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

Is there a way to animate a logo using jQuery automatically upon page load? I want the image to zoom out, then zoom in and change to a different image. Can someone please assist me with this task? Below is the code snippet that I have: $(document).ready ...

jqueryhtmlcssjquery-animatecss-transitions

Ways to conceal <td>s in angularjs on specific rows during ng-repeat

In the first <tr>, I have a table with many <td> elements that I am populating using ng-repeat. <tr ng-repeat="receipt in $data"> <td data-title="voucher number"> <span>{{receipt.voucher_no}}</span> </td ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Breaking the line when combining an image_tag and text in a Rails navbar

Looking for some help combining a logo and brand name in my Bootstrap navbar. I'm running into an issue where there is a line break separating the logo and text. Can someone provide some assistance? <%= link_to image_tag("brand_logo.png") + " Bran ...

htmlcssruby-on-railstwitter-bootstrap

Encountering a Node V18 Peer Dependency Conflicté”™

Can someone please help me understand what's causing this error? Every time I try to install a dependency, this keeps popping up. I'm completely lost and unsure of what's happening. npm ERR! 1 more (the root project) npm ERR! peer ...

javascriptnode.jsangularnpm

When working with the Google Sheets API, an error occurred: "this.http.put(...).map is not a valid

Having difficulty with a straightforward request to the Google Sheets API using the PUT method. I followed the syntax for http.put, but an error keeps popping up: this.http.put(...).map is not a function. Here's my code snippet: return this.http ...

javascriptangulargoogle-sheets-api

The function is attempting to access the 'lockDatabase' property of an undefined object, resulting in an error

I'm encountering an error due to the scope issue with 'this', and I'm struggling to find a solution. I attempted using the fat arrow, which solved the scope problem but created another issue where I lack a callback value that needs to b ...

javascriptangulartypescript

Choose all div elements except for those contained within a certain div

Having trouble with an IE7 z-index fixer that's affecting specific elements. I'm attempting to select all divs, excluding those nested within a particular div. Below is the jQuery code I'm using, but it's not functioning correctly: & ...

javascriptjqueryhtml

Express Promises Linked Together: Lack of Data in Last Stage

When handling put requests for my restful API, I utilize the findOneAndUpdate method of Mongoose. The password is left to the second step where the 'save' pre hook of Mongoose is used to hash the password. router.put("/:id", function(req, res, n ...

javascriptnode.jsexpresspromise

Sending data from a Fetch function to a Parent Component's Prop

I've come across various questions regarding passing data between Child and Parent Components. However, most of the examples I found demonstrate using Form Inputs to showcase how the $emit function works. I am struggling to apply this concept when wor ...

vue.jsvuejs2fetchvue-component

Import data from a distant file into a node Buffer within the web browser

Currently, I am utilizing browserify to utilize this particular package within the browser. Specifically, I have developed a phonegap application that retrieves .fsc files from the server. The code snippet looks like this: var reader = new FileReader( ...

javascriptnode.jsnpmbrowserify

Creating a simple Node.js project using material web components - a step-by-step guide

I have recently started experimenting with Node.js. This is a basic program I created to test the integration of material-components-web. I followed the instructions provided in the readme file and here's what I have implemented so far: package.json ...

javascriptnode.jsnpmpolymer

Suggestions for arranging nested list items securely?

Hello, I'm new to web design and would greatly appreciate any assistance. I've been learning HTML and CSS through a live project but have run into trouble with positioning nested list items. This is how my web browser renders the page: Here&a ...

csshtmlhtml-listscss-position

What steps do I need to follow in order to properly execute this HTTP request?

Recently, I came across this amazing tool called SimplePush.io that is perfect for one of my projects. It works flawlessly via curl, as shown on their website: ~ $ curl 'https://api.simplepush.io/send/HuxgBB/Wow/So easy' or ~ $ curl --data &ap ...

javascriptnode.jshttpcurl

Enable users to choose multiple rows at once or alternatively choose by checking the checkboxes

When using Tabulator with the setting table.selectable = true, any cell click selects the row. However, I specifically want rows to be selected only via checkboxes, so I set selectable = false. The issue now is that the checkboxes behave like a radio butt ...

javascripthtmltabulator

The HTML modal closing button is unresponsive and the contents inside are misaligned, causing functionality issues

I've searched through similar questions, but none of the suggested solutions seem to work for my issue. The problem I'm facing is that the closing button on my modal isn't functioning properly and the content inside it is not aligning corre ...

htmlcssmodal-dialog

I'm looking to position the vibrant red box at the bottom of the screen, right under the navigation bar. However, every time I try to

I'm struggling to align the full-screen red box under the navigation bar. I've tried using flex properties but it's not working as expected. My goal is to have the red box at 100% width and be responsive. Could it be something with my nav b ...

htmlcssbootstrap-4