Hidden value from Input not working with VUE JS

Hidden value from vue not working.

The v-model of the one input its not working.

<template>
  <form class="form-inline" type="POST" @submit.prevent="insertComment" role="form">
    {{ csrf_field() }}
    <div class="form-group">
      <input class="form-control" type="text" name="text" v-model="newcomment.text" placeholder="Your comments" />
      <input type="text" name="post_id" v-model="newcomment.post_id" value="@{{items.id}}" />
    </div>
    <div class="form-group">
      <input type="submit" class="btn btn-default" value="Enviar">
    </div>
  </form>
</template>

v-model="newcomment.post_id" value is null.

How to fix this?

Answer

I will assume that you using using vue 2, and that what u asking basically boils down to default value for input.

1. Interpolation inside attributes has been removed in vuejs 2. so value="@{{items.id}}" is not a legal statement.

2. v-model inherently passing :value already. so passing it again with value="@{{items.id}}" might cause unexpected behaviors. this aspect of v-model mechanics of v-model is documented in vue.js documentation.

   so, as stated, v-model is just syntactic sugar for:

<input v-bind:value="something" v-on:input="something =$event.target.value">

Please see the pattern that you should use to achieve default value for input:

<template>
  <form class="form-inline" type="POST" @submit.prevent="insertComment" role="form">
    <div class="form-group">
      <input  v-model="newcomment.post_id"/>
    </div>
    
  </form>
</template>

<script>
export default {
  data() {
    return {
      newcomment: {
        post_id: 'this is default value'
      }
    }
  }
}
</script>