CODEWITHSUNDEEP
vue.js
justacoder
justacoder

Reputation: 2704

Error rendering variable in @click function call

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 }})"

Upvotes: 1

Views: 118

Answers (3)

Andrew1325
Andrew1325

Reputation: 3579

getNumber(`${ range.id }`)

Should do the trick

Upvotes: 1

Hamilton Gabriel
Hamilton Gabriel

Reputation: 367

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)
    }
    }

Upvotes: 0

Potato Running
Potato Running

Reputation: 408

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

Upvotes: 0

Related Questions