CODEWITHSUNDEEP
javascriptvue.js
Diana
Diana

Reputation: 127

Multiple variables with v-bind Vue.js

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?

Upvotes: 6

Views: 19623

Answers (6)

ilkerciblak
ilkerciblak

Reputation: 11

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.

Upvotes: 0

Orchis
Orchis

Reputation: 533

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.

Upvotes: 0

LeulAria
LeulAria

Reputation: 605

spreading them in to object and using them in bind if object else add them like shown..

<MyComponent v-bind="{...$attrs, featAProps, featBProps}" />

Upvotes: 3

ittus
ittus

Reputation: 22393

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>

Upvotes: 0

Sayed Sajad Hosseini
Sayed Sajad Hosseini

Reputation: 233

also, you can use from below way:

<input v-bind:value="[item.id, item.name]">

Upvotes: 5

zizzo
zizzo

Reputation: 504

You can use anonymous function if you don't want to declare a method:

<div v-bind:onloadstart='()=>{functionOFF = true; editOFF = true;}'></div>

Upvotes: 0

Related Questions