Javascript 如何将属性发送到输入文本的值？（Vue.JS 2）

我的组件如下所示：

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

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

...
...   
导出默认值{
名称：“MessageModal”，
道具：['productName']，
数据（）{
返回{
产品名称：this.productName，
}
}
}

此组件是一个模态。单击按钮时显示此模式。当模态组件显示时，我希望将product_name属性的值发送到输入文本的值

我尝试使用上面的代码，但输入文本不显示product_name属性的值

如果我将输入文本按如下方式输出：

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

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

...

它起作用了。但是，如果我在表单中输入文本，为什么它不起作用呢

---

我该怎么解决呢？

我会这样做：

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

...
...                
导出默认值{
安装的（）{
this.pname=this.productName
},
道具：['productName']，
数据（）{
返回{
pname:“”，
}
}
}

---

这样，当安装组件时，您可以将prop设置为组件的内部数据属性pname，并将输入字段的值与pname绑定。

@Bert Evans，请参阅我的问题。我有最新消息it@BertEvans，如果我把输入的文本放在表单上，它会工作的。但为什么我把输入文本放在表单中，它就不起作用了？好问题：）在某些情况下，页面上可能有其他库清除表单输入？我不认为这是Vue问题。@Bert Evans，看看这个：。它不工作，它不工作。你试着看看我的问题。我必须更新它