How can I pass prop to value of input with vue.js 2?

Question

My vue component is like this :

<template>
    <div class="modal" tabindex="-1" role="dialog">
         <form method="post" :action="baseUrl+'/product/edit'">
            ...
            <input type="hidden" name="product_id" value="{{productId}}">
            ...
         </form>
    </div>
</template>

<script>
    export default {
        props:['productId'],
        ...
    }
</script>

There exist error like this :

value="{{productId}}": Interpolation inside attributes has been removed.

How can I solve this problem?

Answer 1

Use the binding syntax.

<input type="hidden" name="product_id" v-bind:value="productId">

Or

<input type="hidden" name="product_id" :value="productId">