入力テキストの値にプロパティを送信するにはどうすればよいですか？ （Vue.JS 2）

Question

私の成分は次のようである：

<template> 
    <div class="modal" tabindex="-1" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <form id="form-message"> 
        ... 

        <input type="text" class="form-control" id="subject" placeholder="Subject" v-model="product_name" required> 
        ... 
       </form>  
      </div> 
     </div> 
    </div>   
</template> 

<script> 
    export default { 
     name: 'MessageModal', 
     props: ['productName'], 
     data() { 
      return { 
       product_name: this.productName, 
      } 
     } 
    } 
</script> 

このコンポーネントはモーダルです。このモーダルは、ボタンをクリックすると表示されました。モーダル・コンポーネントを示したとき、私は上記のコードのようにしてみてください、私は、フォームから入力されたテキストを配置した場合、入力されたテキストは、PRODUCT_NAMEのプロパティ

の値を表示しない入力テキスト

の値にPRODUCT_NAMEのプロパティの値を送信したいですこのように：

<input type="text" class="form-control" id="subject" placeholder="Subject" v-model="product_name" required> 
<form id="form-message"> 
    ... 
</form>  

これは機能します。しかし、なぜ入力テキストをフォームに入れたら、それは機能しませんか？

どうすれば解決できますか？

Answer 1

私はこのようにそれを行うだろう：

<template> 
... 
    <input type="text" class="form-control" id="subject" placeholder="Subject" v-model="pname" required> 
...     
</template> 

<script> 
    export default { 
    mounted() { 
     this.pname = this.productName 
    }, 
    props: ['productName'], 
    data() { 
     return { 
      pname: "", 
     } 
    } 
    } 
</script> 

コンポーネントは、コンポーネントとPNAMEと入力フィールドのバインド値の内部データプロパティのpnameに小道具セット搭載されているこの方法です。