vuetify.js

Find match in two arrays

由 血红的双手。 提交于 2019-12-08 09:12:01
问题 Update Got the answer: if (this.checkedColors.length > 0) { straps = straps.filter(strap => { return strap.colors.find(color => { return this.checkedColors.includes(color.title.toLowerCase()); }); }); } I have two arrays, where I need to return products that match the checkbox value. I've created a screen recording to display how this works: http://recordit.co/EddLjeqM7i My code is the following: export default { data() { checkedColors: [], filterings: [{ title: "Farver", filters: [{ title:

Vuetify Styles not visible

由 筅森魡賤 提交于 2019-12-08 08:22:25
I am a beginner in the world of Vue, so please bear with my foolish question(s). I have a boilerplate code for a Vue project which I cloned from: Vue Enterprise Boilerplate I wanted to use Vuetify components, so I followed the following steps: 1. Cloned the vue-enterprise-boilerplate 2. npm install vuetify --save 3. In my main.js I added the vuetify dependency like: import Vuetify from 'vuetify'; import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); 4. I am using Vue CLI 3 (which comes with the boilerplate), also I have installed the CCS Loader. 5. Now in my app.vue, I have a simple button

Vuetify Styles not visible

由 我只是一个虾纸丫 提交于 2019-12-08 07:19:27
问题 I am a beginner in the world of Vue, so please bear with my foolish question(s). I have a boilerplate code for a Vue project which I cloned from: Vue Enterprise Boilerplate I wanted to use Vuetify components, so I followed the following steps: 1. Cloned the vue-enterprise-boilerplate 2. npm install vuetify --save 3. In my main.js I added the vuetify dependency like: import Vuetify from 'vuetify'; import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); 4. I am using Vue CLI 3 (which comes

How to disable a button after clicking a button using vue.js

由 送分小仙女□ 提交于 2019-12-08 05:30:24
问题 I am making a voting application. I want to disable the button once clicking the voting button. How to disable the button. template <v-btn v-for="choice in data.choices" @click="doVote(choice.id)" color="success" v-bind:key="choice.id"> votes: {{ choice.votes }} </v-btn> script data () { return { vote: null, questions: [], } }, methods: { fetchData () { this.$request.questions.list().then(res => { this.questions = res.data.results }) }, // add votes doVote (vote) { if (!vote) { return } this.

Unable to override styles in vuetify

由 a 夏天 提交于 2019-12-08 05:06:47
问题 how can I overwrite actual classes in vuetify? I have created a ./src/stylus/main.styl file where I override some of the current vuetify settings as a test: @import '~vuetify/src/stylus/settings/_variables' @import '~vuetify/src/stylus/elements/_typography' $material-dark.background = green $body-font-family = Arial $alert-font-size = 18px .display-2 font-size: $headings.h6.size !important font-family: $headings.h3.font-family !important @import '~vuetify/src/stylus/main' For some reason the

Vuetify: fixing component to top of v-layout?

由 时光毁灭记忆、已成空白 提交于 2019-12-08 05:04:35
问题 I'm trying to build a webpage with vuetify and nuxt. I'm trying to set the max-width property of the expansion panel ui component (https://vuetifyjs.com/en/components/expansion-panels). I have: <template> <v-app id="inspire"> <v-layout align-center justify-center row fill-height> <!-- <v-layout align-center > --> <v-expansion-panel style="maxWidth: 1200px" > <v-expansion-panel-content v-for="(item,i) in items" :key="i"> <div slot="header">{{item.header}}</div> <v-card > <v-card-text>{{item

Vuetify autocomplete similar items are not showing

由 旧时模样 提交于 2019-12-08 04:50:44
问题 I have custom posts with similar title in my case from my local API and I've tried to show posts by search query from items array. Data: { "count": 5, "entries": [ { "id": 3, "title": "Senior developer Python" }, { "id": 4, "title": "Senior developer Python" }, { "id": 5, "title": "Senior developer Python" } ] } Vuetify autocomplete code: <v-autocomplete v-model="model" :items="items" :loading="isLoading" :search-input.sync="search" color="white" hide-no-data hide-selected item-text=

Vuetify autocomplete similar items are not showing

由 跟風遠走 提交于 2019-12-08 02:17:28
I have custom posts with similar title in my case from my local API and I've tried to show posts by search query from items array. Data: { "count": 5, "entries": [ { "id": 3, "title": "Senior developer Python" }, { "id": 4, "title": "Senior developer Python" }, { "id": 5, "title": "Senior developer Python" } ] } Vuetify autocomplete code: <v-autocomplete v-model="model" :items="items" :loading="isLoading" :search-input.sync="search" color="white" hide-no-data hide-selected item-text="Description" item-value="API" return-object ></v-autocomplete> Javascript code: <script> export default { data:

Vue JS Vuetify menu named slot “activator” is not binding to the template, but going to “default”

由 杀马特。学长 韩版系。学妹 提交于 2019-12-08 01:54:43
问题 I cannot seem to get the example code for a Vuetify v-menu to work inside my PWA app, but it works normally in a Fiddle (e.g. https://jsfiddle.net/tjw13yz4/27/) The problem is: the activator slot content doesn't appear. By debugging the vuetify source code, I have found that the activator template turns up under the "default" slot (where all the hidden content is), not in the named activator slot (where the visible button/click area should be). I have simplified my app to the bare bones

v-tooltip doesn't show component behind it

由 人走茶凉 提交于 2019-12-08 01:48:50
问题 I'm trying to implement v-tooltip following the example in their documentation but I cannot make it work. If I copy the example, i receive this error: [Vue warn]: Property or method "on" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. if I declare property on the btn doesn't show up at all. This is the template: <v-tooltip bottom> <template v-slot
订阅 vuetify.js