入力からの隠し値がVUEで機能しないJS

Question

vueの隠し値が機能しません。

入力のvモデルが機能しない。

<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"値はnullです。

これを修正するにはどうすればよいですか？

Answer 1

私はvue 2を使用していると仮定します。基本的に質問すると、入力のデフォルト値はになります。

1. 属性内の補間属性がvuejs 2で削除されています。value="@{{items.id}}"は法的な記述ではありません。

2. v-model本来、:valueを渡します。 を再度とし、 value="@{{items.id}}"とすると予期しない動作が発生する可能性があります。 this aspect of v-model mechanics of v-model is documented in vue.js documentation。

   ので、述べたように、v-modelがためだけ糖衣構文です：

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

あなたが入力のデフォルト値を達成するために使用すべきパターンを参照してください。

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