i have a couple of different styling that needs to apply to a text. I am trying to bind the styles using array syntax as shown in the documentation: https://v2.vuejs.org/v2/guide/class-and-style.html but not sure what i’m doing wrong. I have created a pen for demonstration: https://codepen.io/anon/pen/orVGNP The computed property style is the one i am trying to apply as well which
Tag: vuetify.js
Vuetify adds scrollbar when it’s not needed
I created a new project with vue-cli, then added vuetify with vue add vuetify. Opened the site and saw a blank page with a useless scrollbar I tried mounting app without actually App component, but the problem still exists. It vanishes only when I remove import ‘./plugins/vuetify’ main.js Answer Just add the following to your css style : This default
creating abstract components that can manage external data
Currently I use Vuetify for base components and would like to create reusable extensions. For example a list containing checkboxes, a datatable column with some functionality etc. For this question I will take the list containing checkboxes example. I created the following component called CheckboxGroup.vue This component takes an array of objects as a property and creates a checkbox for
Vuelidate: setting $model does not update component
Given the following Vue component that uses Vuetify and Vuelidate: I would like to programmatically change the value of this.picker. I tried both changing the v-model as well as the Vuelidate $model: and Neither of them caused a change in the UI nor produced an error message. How can I programmatically update the DatePicker’s value? Answer Try just assigning v-model
vue.js: change the values of a table in a reactive way
To create a table I am using vuetify data-table. The data is coming from an express server which is requested via axios and then gives me a response that is structured as follows: This response is being used by the vue front as follows: I know that I can change the state via this.orders now without reloading the whole site,
Vuetify v-select value not returning key
I am trying to v-model the keys from this data from my v-select : My v-select and output look something like this (this is as close as i can get: The problem with this, is the value of the v-select will be “IT, Italy”, when i just want Italy I’ve been trying to work out ways, such as using a
Is there specific number input component in Vuetify?
I’ve seen a component in Element UI for managing the amount of items, it’s over here: https://element.eleme.io/#/en-US/component/input-number I would want to use something like that in Vuetify, but I cannot find a similar component or even similar style example in Material Design. What’s the best way to achieve it? Answer Update: This answer pertains to version 1 of Vuetify, yukashima
Untie text field’s icon click enabling from the input one
I would like to implement an input field that can be unlocked by the user if needed. Visually, I was thinking that the button should be either outside or inside the field but strongly linked to it. To do so, I have been using the Vuetify Text Field’s append-outer-icon props : The template : And here is the script :
Checking checkbox A, triggers checkbox A & B. But checking checkbox B should only trigger checkbox B in Vuetify
I have two checkboxes in Vuetify. I’m trying to write them in a way that if I check checkbox A, it automatically checks both checkbox A & B. But clicking on checkbox B triggers only checkbox B. What’s the best way to do it? Here is my code: Answer There are few solutions to handle it. You can use Vue
How to get selected value from dropdown in vuejs?
HTML JS How can I get the selected value of v-select upon clicking on the button ? . . Answer If you are refering to vuetify you can continue reading. Let’s take this example (codepen): If you use other key for value in your items object you need to specify the item-value attribute in your v-select element, else it will