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>
Related
I have a scenario where the wrapped elements should only be draggable upon meeting certain conditions. I handled it in the HTML like this:
<draggable v-if='somePassingConditions'>
<my-component></my-component>
</draggable>
<my-component v-else></my-component>
I'm trying to not put the if-else condition in the template. Is there a way to enable or disable the drag functionality with Vue.Draggable? Thanks
Try this:
<draggable :disabled='somePassingConditions'>
<my-component></my-component>
</draggable>
Here is an example from draggable offical repo: https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/simple.vue
Also this link may be helpful: https://sortablejs.github.io/vue.draggable.next/#/simple
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' />
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
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!
The standard way of passing properties to a component is to use the v-bind directive:
<Child :prop1="myObj.prop1" :prop2="myObj.prop2" :prop3="myObj.prop3"/>
But Vue makes it possible to simply pass the entire object:
<Child v-bind="myObj"/>
However, one downside I've come across is that the HTML element shows all these properties:
<div class="child" prop1="[Object object]" prop2="2" prop3="[1,2,3]">...<div/>
Is there a way to prevent this behaviour?
There is a way to avoid this without passing props explicitly:
https://v2.vuejs.org/v2/guide/components-props.html#Non-Prop-Attributes
add inheritAttrs: false to the component you are passing props to
After reading documentation on component props look's like vueJs does not provided such provision to avoid this. https://v2.vuejs.org/v2/guide/components-props.html