Vue.js表单如何设置$current_user->display_name为姓名输入框默认值？

我有以下PHP+HTML表单代码：

public function doContactForm() {
    ob_start();
    $current_user = wp_get_current_user();
    ?>
<div id="vue_contact_form_app">
    <div class="basic-message" v-bind:class="{ 'error-message' : status == 'error', 'success-message' : status == 'sent' || status == 'sending' }" v-on:click="closeMessage">
            <p v-show="status != 'clean'">{{ actionMessage }}</p>
    </div>
    <form class="vue-form" @submit.prevent="submit">
        <fieldset>
            <div>
                <label class="label" for="name">Your Name:</label>
                <input type="text" name="name" id="name" placeholder="Your Name" required="" maxlength="80" v-model="name">
            </div>
            <div>
                <label class="label" for="email">Your Email:</label>
                <input type="email" name="email" id="email" placeholder="name@domain.com" required="" maxlength="40" :class="{ email , error: !email.valid }" v-model="email.value">
            </div>
            <div>
                <label class="label" for="subject">Subject:</label>
                <input type="text" name="subject" id="subject" placeholder="An iteresting idea." required="" maxlength="120" v-model="subject">
            </div>
            <div>
                <label class="label" for="textarea">Message:</label>
                <textarea class="message" name="textarea" id="textarea" placeholder="Dear Mr. Dmitry, ..." required="" v-model="message.text" :maxlength="message.maxlength"></textarea>
                <span class="counter">{{ message.text.length }} / {{ message.maxlength }}</span>
            </div>
            <div class="g-recaptcha" data-sitekey="<?php echo $this->getOption('PublicKey');?>"></div>
            <div>
                <input type="submit" value="Send">
            </div>
        </fieldset>
    </form>
</div>

以及对应的Vue.js代码：

function createVueContactForm(sendUrl) {
new Vue({
    // root node
    el: "#vue_contact_form_app",
    // the instance state
    data: function () {
        return {
            name: "",
            email: {
                value: "",
                valid: true
            },
            subject: "",
            message: {
                text: "",
                maxlength: 64 * 1024
            },
            status: "clean", //error, sending, sent
            actionMessage: "",
        }
    },
    
    computed: {
        hasMessage: function () {
            return this.status != "clean";
        }
    },

我需要将“Your Name”输入框的默认值设置为$current_user->display_name，但之前尝试通过HTML设置默认值没有效果，请问该如何实现？有没有更简便或更优的方法？

因为Vue的v-model会完全接管输入框的状态，直接在HTML标签里设置value属性会被Vue的data值覆盖，所以必须从Vue的数据源入手，以下是两种实用的实现方式：

方法一：直接在Vue的data中注入PHP值 #

这是最直接的方式，修改Vue的data初始化代码，将name的默认值替换为PHP输出的用户名称：

function createVueContactForm(sendUrl) {
new Vue({
    el: "#vue_contact_form_app",
    data: function () {
        return {
            name: "<?php echo esc_attr($current_user->display_name); ?>", // 注入转义后的用户名称
            email: {
                value: "",
                valid: true
            },
            subject: "",
            message: {
                text: "",
                maxlength: 64 * 1024
            },
            status: "clean",
            actionMessage: "",
        }
    },
    computed: {
        hasMessage: function () {
            return this.status != "clean";
        }
    },

注意使用esc_attr()对用户名称进行转义，避免XSS风险和HTML字符冲突。

方法二：通过自定义属性+props传递值（更符合组件化思想） #

如果后续需要将表单封装为可复用组件，这种方法扩展性更好：

1. 在HTML的Vue根节点添加自定义属性，传递用户名称：

<div id="vue_contact_form_app" data-username="<?php echo esc_attr($current_user->display_name); ?>">
    <!-- 原有表单内容保持不变 -->
</div>

2. 修改Vue实例，通过props接收值并初始化name：

function createVueContactForm(sendUrl) {
new Vue({
    el: "#vue_contact_form_app",
    props: {
        username: {
            type: String,
            default: ""
        }
    },
    data: function () {
        return {
            name: this.username, // 用props值初始化name
            email: {
                value: "",
                valid: true
            },
            subject: "",
            message: {
                text: "",
                maxlength: 64 * 1024
            },
            status: "clean",
            actionMessage: "",
        }
    },
    computed: {
        hasMessage: function () {
            return this.status != "clean";
        }
    },

为什么HTML设置默认值无效？ #

当v-model绑定输入框时，输入框的状态完全由Vue的data控制，HTML中的value属性仅作为无Vue绑定场景的初始值，一旦Vue实例初始化，就会用data里的name值（空字符串）覆盖输入框的内容，所以直接写<input value="<?php echo $current_user->display_name; ?>" v-model="name">不会生效。

内容的提问来源于stack exchange，提问作者Alexey Starinsky