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="newment.text" placeholder="Your ments" />
      <input type="text" name="post_id" v-model="newment.post_id" value="@{{items.id}}" />
    </div>
    <div class="form-group">
      <input type="submit" class="btn btn-default" value="Enviar">
    </div>
  </form>
</template>

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

How to fix this?

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="newment.text" placeholder="Your ments" />
      <input type="text" name="post_id" v-model="newment.post_id" value="@{{items.id}}" />
    </div>
    <div class="form-group">
      <input type="submit" class="btn btn-default" value="Enviar">
    </div>
  </form>
</template>

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

How to fix this?

• javascript
• vue.js

Share Improve this question Follow edited Oct 24, 2017 at 7:42 LiranC 2,48022 gold badges3030 silver badges5656 bronze badges asked Oct 23, 2017 at 21:04 user8563382user8563382 3

• Show the ponent code? I'm guessing it's because you're also trying to set the value value="@{{items.id}}", it's probably interfering with v-model. The default value of the input should be set in the ponent data – Eric Guan Commented Oct 23, 2017 at 21:25
• I want to pass the items.id to model data – user8563382 Commented Oct 23, 2017 at 21:26
• @EricGuan i dont know how to fix this.. – user8563382 Commented Oct 23, 2017 at 21:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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="newment.post_id"/>
    </div>
    
  </form>
</template>

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

<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="newment.text" placeholder="Your ments" />
      <input type="text" name="post_id" v-model="newment.post_id"  />
    </div>
    <div class="form-group">
      <input type="submit" class="btn btn-default" value="Enviar">
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
        newment.post_id:  _this.items.id
    }
  }
}
</script>

---

v-model and :value both are same.