I'm working with vue-howler and for some reason, the data there is being passed using mixin, I don't see a way to access such mixin from the vue file script (much less do I find a way to change the data in it)
I want to show the progress of playing a music file in a vuetify slider, but due to being contained in a mixin, i get an error "Computed property was assigned to but it has no setter."
//MusicPlayerComponent.vue
<template>
<v-card flat width="500px" height="200px">
<v-flex class="info d-flex justify-center">
<v-btn icon large #click="togglePlayback">
<v-icon>
{{ playing ? 'mdi-pause' : 'mdi-play' }}
</v-icon>
</v-btn>
<v-slider v-model="progress" min="0" max="100">
</v-slider>
</v-card>
</template>
I don't need to show the script section of my vue file because there is literally nothing there, the "progress, playing, togglePlayback" properties and functions in the above code all come from that "mixin"
//MusicPlayerComponent.vue
<script lang="ts">
import { Component, Vue, Watch} from "vue-property-decorator"
// #ts-ignore
import VueHowler from 'vue-howler'
#Component({
mixins: [VueHowler]
})
export default class AudioPlayerComponent extends Vue {
}
</script>
You can use the seek property of vue-howler to get/set the position of playback for a sound. See docs for more props and options
Related
I use Vuetify but disabled the import of all icons since treeshaking wasn't working properly in Nuxt, instead I followed the advice and import them manually as stated in this thread: vuetifyjs: Adding only used icons to build
However, this means that a lot of components that require icons, e.g v-checkbox, v-select or v-combobox (which uses v-checkbox in their dropdown menus) need their icons added manually. Just using v-checkbox allows for :on-icon & :off-icon props to be used but I can't figure out how I'd reach them when the checkboxes are used by other components.
I've been attempting to change the behaviour in both v-select and v-combobox.
This is as far as I got but clearly this doesn't add the checked icon, just the blank one.
<v-combobox outlined multiple chips v-model="select" :items="items">
<template v-slot:item="{ item }">
<v-icon>{{mdiCheckboxBlankOutline}}</v-icon>{{ item }}
/template>
</v-combobox>
import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "#mdi/js";
Data(){
select: ["Stockholm"],
items: [
"Stockholm",
"London",
],
}
My question is therefore, how can replicate the default checkbox behaviour for the combobox menu using imported icons?
This thread seems to talk about it but never ends up showing a code example:
https://github.com/vuetifyjs/vuetify/issues/10904
(Meaning it should look like this)
You can use the item slot, where you are provided with the item, on and attrs object, to replicate the default behaviour.
You bind the on (events) and attrs (properties) objects to the custom list item, to send click events from your list item to combobox component.
Next you set the appropriate icon depending on the selected values. See the code below and the code sandbox.
<template>
<v-app>
<v-combobox
label="Label"
outlined
multiple
chips
v-model="select"
:items="items"
>
<template v-slot:item="{ item, on, attrs }">
<v-list-item v-on="on" v-bind="attrs">
<v-list-item-icon>
<v-icon>
{{ select.includes(item) ? checkIcon : uncheckIcon }}
</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item" class="text-left"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-combobox>
</v-app>
</template>
<script>
import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "#mdi/js";
export default {
name: "HelloWorld",
data() {
return {
items: ["One", "Two", "Three"],
select: [],
uncheckIcon: mdiCheckboxBlankOutline,
checkIcon: mdiCheckboxMarked,
};
},
};
</script>
CodeSandbox: https://codesandbox.io/s/recursing-banach-cb7ys?file=/src/components/HelloWorld.vue
I was wondering if it is possible to loop through multiple custom components in a carousel in Vueitfy?
I have imported and registered three components in my carousel.vue file below, however, I am not sure how you can loop through all the registered components in the v-carousel-item tag.
What I have in my carousel so far:
<template>
<v-carousel
hide-delimiter-background
delimiter-icon="mdi-minus"
width="100%"
height="700"
>
<v-carousel-item
v-for="(component, i) in components"
:key= i
reverse-transition="slide-fade"
transition="slide-fade"
>
</v-carousel-item>
</v-carousel>
</template>
<script>
import Carousel_s1 from './Carousel_s1.vue'
import Carousel_s2 from './Carousel_s2.vue'
import Carousel_s3 from './Carousel_s3.vue'
export default {
name: 'Carousel',
components: {
Carousel_s1,
Carousel_s2,
Carousel_s3,
},
(continue my code ...)
Inside your v-carousel-item you can use Vue's dynamic component mechanism to display the correct one:
<v-carousel-item
v-for="(component, i) in components"
:key="i"
reverse-transition="slide-fade"
transition="slide-fade"
<component :is="component"></component>
</v-carousel-item>
(BTW, you also should wrap your key value in quotes, as I did in my sample code)
Please note that this is not a Vuetify-specific feature but works in all Vue code :)
I’m following this documentation: https://v2.vuejs.org/v2/guide/components.html
I created custom v-text-field component which looks like that:
<template>
<div>
<v-text-field
:label="label"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"></v-text-field>
</div>
</template>
<script>
export default {
name: "txtbox",
props: ['value', 'label'],
}
</script>
I implemented it in my main component almost succesfully:
<txtbox
label="Name"
v-model="eventName"
/>
I don’t think it is necessary to paste all the code, but if it is I will edit the post. Here is how it works:
I have a list, when i click on the list element the text-field displays content of it, this works fine. Sadly when I’m editing the content of text-field the v-model value is not updating. I can also add that it works fine with normal (like in the docs) instead of . Is there anything I can do to make it work, or should i use simple input ?
Thanks
When you want to $emit the new value, you just have to emit the $event, and not $event.target.value
<template>
<div>
<v-text-field
:label="label"
v-bind:value="value"
v-on:input="$emit('input', $event)"></v-text-field>
</div>
</template>
v-on:input can also be shortened to just #input
Is it possible to create parent (wrapper) components in Vue? I've looked and I haven't been able to find anything
What I have in mind is the following (the v-something components are from the vuetify library):
//cardWrapper.js
<template>
<v-card>
<v-row>
<v-col>
</v-col>
</v-row>
</v-card>
<template>
<script>
export default {
blabla
}
</script>
then this should somehow be available so that I can in the main file
// index.vue
<template>
<cardWrapper>
<v-btn>Click Me!</v-btn>
</cardWrapper>
</template>
I'm guessing this is a straightforward process and that I simply haven't been googling it correctly.
The only thing I've been able to find was to use dynamic components, but I would rather not pass components as properties
Here's the answer:
custom component
//custom-parent.vue
<template>
<custom-parent>
<slot/>
</custom-parent>
</template>
main file
//index.vue
<template>
<custom-parent>
<a>Hellohello</a>
</custom-parent>
</template>
pls, am trying to add some components dynamically in vue so that i can easily create some tabs, the components are all stored in an array, but when i looped through each of those components, it displayed the name of the components instead of the content of the components, below is my code
<template>
<v-card>
<v-tabs color="#4FC3F7" slider-color="#004D40" right grow>
<v-tab ripple v-for="(ttab, index) in tabss" :key="index">{{ttab}}</v-tab>
<v-tab-item v-for="(tabCont, index) in tabConts" :key="index">
{{tabCont}}
</v-tab-item>
</v-tabs>
</v-card>
</template>
<script>
import ProfileComponents from './Profile.vue'
import PasswordsComponents from './Passwords.vue'
import ProjectsComponents from './Projects.vue'
import FiniancialsComponents from './Finiancials.vue'
import VerificationsComponents from './Verifications.vue'
export default {
data() {
return {
tabss:['Profile','Passwords','Projects','Finiancials','Verifications'
],
tabConts:['<ProfileComponents/>','<PasswordsComponents/>','<ProjectsComponents/>','<FiniancialsComponents/>','<VerificationsComponents/>'
],
};
},
components:{
ProfileComponents, PasswordsComponents, ProjectsComponents, FiniancialsComponents, VerificationsComponents
}
}
</script>
pls what am i doing wrong
For starters, tabConts is just an array of strings, so you're getting what you are asking for.
You probably want to use the 'component' component, which lets you specify the name of the component to insert as a property:
<component v-bind:is="componentName"></component>
So your template changes to something like this:
<template>
<v-card>
<v-tabs color="#4FC3F7" slider-color="#004D40" right grow>
<v-tab ripple v-for="(ttab, index) in tabss" :key="index">{{ttab}}</v-tab>
<v-tab-item v-for="(tabCont, index) in tabConts" :key="index">
<component :is="tabCont"></component>
</v-tab-item>
</v-tabs>
</v-card>
</template>
This assumes the components are registering themselves correctly, etc., but this should get you closer to a solution.