javascript - Multiple variables with v-bind Vue.js - Stack Overflow

admin管理员组

文章数量:1237563

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?

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?

• javascript
• vue.js

Share Improve this question Follow edited Jul 12, 2018 at 9:53 squancy 56511 gold badge88 silver badges2525 bronze badges asked Jul 12, 2018 at 9:51 DianaDiana 12722 gold badges22 silver badges1010 bronze badges 6

• move those into metrod? – dfsq Commented Jul 12, 2018 at 9:52
• @dfsq - yeah I though about that, just wanted to see if there's a way to doing it directly – Diana Commented Jul 12, 2018 at 9:54
• try to do it with & or && operator maybe – Julien METRAL Commented Jul 12, 2018 at 9:55
• @JulienMetral - Yeah I tried with both and I get a compiling error – Diana Commented Jul 12, 2018 at 9:58
• To listen to a method, you should use v-on:onloadstart='functionOFF = true; editOFF = true' – ittus Commented Jul 12, 2018 at 10:04

 |  Show 1 more comment

6 Answers 6

Sorted by: Reset to default 5

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>

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.

本文标签： javascriptMultiple variables with vbind VuejsStack Overflow