Versteckter Wert von Eingabe funktioniert nicht mit VUE JS

Question

Versteckter Wert von vue funktioniert nicht.

Das V-Modell des einen Eingangs funktioniert nicht.

<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" Wert ist null.

Wie behebt man das?

Answer 1

Ich werde davon ausgehen, dass Sie mit vue 2 verwenden, und das, was Sie Fragen im Grunde kocht bis Standardwert für die Eingabe.

1. Die Interpolation von internen Attributen wurde in vuejs 2 entfernt. Daher ist value="@{{items.id}}" keine rechtliche Aussage.

2. v-model inhärent übergeben :value bereits. also es wieder mit value="@{{items.id}}" übergeben kann zu unerwartetem Verhalten führen. this aspect of v-model mechanics of v-model is documented in vue.js documentation.

   so, wie gesagt, ist v-model nur syntaktischer Zucker für:

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

Bitte um das Muster zu sehen, die Sie für Standardwert zu erreichen Eingabe verwenden sollten:

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