I made a custom element extends built-in element like <button is="my-button">. But it's not working when I use it in VueJs. Because maybe VueJs use is attribute for its components.
Is there any good solution for this?
<button is="my-button"> -> <my-button>:
Vue try to make its component. and then my button is broken.
<button is="my-button" v-pre>:
It works for button element but data binding in button is not working.
<button v-my-custom-directive="'my-button'">:
It works and it's my latest solution... But it seems ugly. I should use quotation marks for avoid undefined variable error. I don't want to suggest other people who use my element in VueJs.
Sample code: https://jsbin.com/yucojat/2/edit?html,js,output
Related
I am getting strange behaviour when trying to dynamically update the content of a slot in Vue with Vuetify. I'm sure this is just a function of misunderstanding how slots work.
I have a slot in a custom component, like so:
<template #selectButtons="slotProps">
<v-icon #click="dropToggle(slotProps.player)"
:color="dropColor(slotProps.player)"
class="mr-5"
>
fas fa-skull-crossbones
</v-icon>
</template>
When the user clicks on the icon, it is meant to toggle the icon to different colors.
I cannot seem to get dropColor to fire on each click consistently, HOWEVER, the weird part is, if I make some change inside the <v-icon> component, like say I just add {{dropColor(slotProps.player)}} inside the v-icon tags, then all of a sudden the code will work.
But then if I do a full refresh of the page, it stops working. Then I delete that code and put it back in, then it works again!
I have tried forceUpdate and keys on the v-icon tag.
Would appreciate any help
You are trying to pass function dropColor(slotProps.player) as props. The better idea is to replace function to an object or variable and change that object/variable within method dropToggle(slotProps.player) after #click event is firing .
I was wondering if it is possible to write something like below;
<buttton #click="function(){alert('Yoohooo')}"></button>
Without having to write a method in the Vue instance every time I want to use #click for something as small as that.
It is impossible because Vue trying to add more attributes to DOM and DOM's events in its way with custom attributes and its annotations, methods should be write in methods and so on. As you know HTML is displayed by browsers by tag name, Vue also does that by new rules, more syntax but basically it does not allow write javascript function as tag's attributes
You can use the window-plugin
https://www.npmjs.com/package/window-plugin
<button #click='$window.alert("You clicked a button.")'>Click Me</button>
<button #click='$window.console.log("A button was clicked.")'>Click Me</button>
<button #click='$window.open("https://www.quickchords.org/", "_blank"))'>Click Me</button>
<h1 :v-text='$document.title' />
To make code more simple/clean for me and my designers, I'd like to be able to do something like below. Is it possible - using a custom directive or render function to implement this with a simple attribute?
This would really help separating animation from structure and functionality, which I think could be helpful in many cases. I figure render functions can easily wrap an element with other HTML elements, but can they wrap elements (or components) with custom Vue transitions?
This:
<template>
<my-component custom-transition></mycomponent>
</template>
Becomes this:
<template>
<custom-transition>
<my-component></mycomponent>
</custom-transition>
</template>
Or maybe bring it up on Github?
Thanks!
A Vue forum member provided a great solution for me in this thread using dynamic components. Happy!
I wonder how can I achieve a simple tooltip component in Vue?
What I try to do is: Hover on element, a component tag will be appended.
I do not know how to compile/render that component into DOM after I append it using jquery. In Angular, this can be achieved by using $compile
This way to implement tooltip may not be a good practice, but I just wonder how to achieve.
Thanks,
In vue, I have
<button v-bind:class="['mdc-tab', {'mdc-tab--active' : index===tabs.currentTab}]"></button>
however, this binds it to the variables tabs.currentTab. However the mdc framework already switches tab classes, so I only need the above to render initially. Something like using v-once. However v-once:class doesn't work. How can I do this?
Thanks
You should know that v-once does not expect an expression: vue directives v-once
So all you need to do is:
<button v-once v-bind:class="['mdc-tab', {'mdc-tab--active' : index===tabs.currentTab}]"></button>