javascript - 如何将属性发送到输入文本的值？ (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>

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