Error rendering variable in @click function call

Question

I'm trying to pass an object property into a click event. I know you cannot pass curly brackets into html attributes since I have the title property output correctly. But how to do the same when trying to render a click event?

<p class="control" v-for="range in ranges">
    <a class="button is-outlined is-primary has-text-black" :title="range.title" @click="getNumber({{ range.id }})">{{ range.title }}</a>
</p>

invalid expression: expected property name, got '{' in

    getNumber({{ range.id }})

  Raw expression: @click="getNumber({{ range.id }})"

Andrew1325 · Accepted Answer · 2018-11-06 06:39:32Z

1

getNumber(`${ range.id }`)

Should do the trick

answered Nov 6, 2018 at 6:39

Andrew1325

3,5791 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

justacoder Over a year ago

Your solution also worked as I'm new to Vue so I attempt each different answer.

Hamilton Gabriel · Accepted Answer · 2018-11-06 02:24:25Z

0

add key in v-for... And @click="getNumber({{range.id}})" to @click="getNumber(range.id)"

<p class="control" v-for="(range, key) in ranges" :key="key">
        <a class="button is-outlined is-primary has-text-black" :title="range.title" @click="getNumber( range.id )">{{ range.title }}</a>
    </p>

    methods: {
    getValueNumber(value){
    console.log(value)
    }
    }

answered Nov 6, 2018 at 2:24

Hamilton Gabriel

3651 silver badge6 bronze badges

1 Comment

justacoder Over a year ago

While your change to getNumber() was accurate, adding the key index gave me a warning: Property or method "key" is not defined on the instance but referenced during render.

Potato Running · Accepted Answer · 2018-11-06 02:20:57Z

0

Please change @click="getNumber({{ range.id }})" to @click="getNumber(range.id )". Vue had compile it when variable in function.

answered Nov 6, 2018 at 2:20

Potato Running

4084 silver badges11 bronze badges

Collectives™ on Stack Overflow

Error rendering variable in @click function call

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related