如何将属性发送给输入文本的值？ （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这样。