2

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?

Improve this question
3
  • Show the component 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 component data Commented Oct 23, 2017 at 21:25
  • I want to pass the items.id to model data Commented Oct 23, 2017 at 21:26
  • @EricGuan i dont know how to fix this.. Commented Oct 23, 2017 at 21:32

2 Answers 2

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

<script>
export default {
  data() {
    return {
      newcomment: {
        post_id: 'this is default value'
      }
    }
  }
}
</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1 
<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"  />
    </div>
    <div class="form-group">
      <input type="submit" class="btn btn-default" value="Enviar">
    </div>
  </form>
</template>

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

v-model and :value both are same.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.