I'm trying to pass multiple variables in the following code:
<div v-bind:onloadstart='functionOFF = true; editOFF = true'></div>
but I get the following error:
[Vue warn]: Failed to generate render function: SyntaxError: Unexpected token ; in
I tried replacing the ; with a , but the I get:
[Vue warn]: Failed to generate render function: SyntaxError: Invalid shorthand property initializer in
Any ideas on how to achieve this?
also, you can use from below way:
<input v-bind:value="[item.id, item.name]">
spreading them in to object and using them in bind if object else add them like shown..
<MyComponent v-bind="{...$attrs, featAProps, featBProps}" />
You can use anonymous function if you don't want to declare a method:
<div v-bind:onloadstart='()=>{functionOFF = true; editOFF = true;}'></div>
According to document, v-bind should be an value or an object.
v-bind
Expects: any (with argument) | Object (without argument)
Argument: attrOrProp (optional)
You should use v-on to listen to event (in this case onloadstart). v-on can use with Inline Statement
v-on
Expects: Function | Inline Statement | Object
Argument: event
<div v-on:onloadstart='functionOFF = true; editOFF = true'></div>
functionOFF = true; editOFF = true in created hook of Vue component.In Vue 3, I wasn't having much luck with the array syntax
<MyComponent v-bind="[$attr, propA]">
but I found this comment in Vue's github repo.
This led me to try
<MyComponent v-bind="($attrs, props)" :anotherProp="anotherProp">
which ended up working for me.
FOR VUE.js ^3.3.4 and Vuetify ^3.5.0
Just tried object destruction way on the props and attributes I want to bind my button component, and it worked.
For presentation, I was trying to construct a menu button with activator props and dynamic attributes definitions for colors, custom classes etc..
<v-menu>
<template v-slot:activator=" { props, isActive }">
<v-btn
v-bind="{...props, ...filterBtnOptions}"
variant="elevated"
>
{{ `${filterActive.name} (${filterActive.number})` }}
<v-icon right :style="{ transform: isActive ? 'rotate(-180deg)' : 'rotate(0)' }">mdi-chevron-down</v-icon>
</v-btn>
</template>
//..code
</v-menu>
Here props is the activator props of the menu component and filterBtnOptions is a custom attribute object.
&or&&operator maybe