如何將屬性發送給輸入文本的值？ （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這樣。