CakePHP 3 和 VueJS - 使用 v-model 设置默认表单的选择框答案

【问题标题】：CakePHP 3 and VueJS - use v-model to set default Form's selectboxCakePHP 3 和 VueJS - 使用 v-model 设置默认表单的选择框
【发布时间】：2017-02-28 12:43:02
【问题描述】：

我正在使用 CakePHP Form 助手来创建表单输入字段。当用户编辑项目时，它将用数据预先填充字段。我在每个输入字段上使用 v-model 以确保正确填充数据。

这对文本框有好处，因为数据绑定正确。但是对于<select> 字段，v-model 似乎不起作用。我尝试使用 Form->input() 的默认属性，但没有帮助。这是一些代码：

<div class="fields">
    <?= $this->Form->input('email', [
        'label' => __('Email'),
        'type' => 'email',
        'v-model' => 'emailModel',
        'placeholder' => __('Required'),
        '@keydown.enter.stop.prevent' => 'return false;',
        '@keyup.enter.stop.prevent' => 'onSubmit()'
    ]); ?>
    <?= $this->Form->input('status', [
        'label' => __('Status'),
        'type' => 'select',
        'default' => '{{userStatus}}',
        'options' => [
            1 => 'Active',
            2 => 'Inactive'
        ],
        '@keydown.enter.stop.prevent' => 'return false;',
        '@keyup.enter.stop.prevent' => 'onSubmit()'
    ]); ?>
</div>

email 文本框填充了正确的数据，但status 选择框却没有。但是，如果我将{{userStatus}} 替换为例如2，它会将默认选项设置为Inactive，即使{{userStatus}} 本身具有值2。

我该如何解决这个问题？

【问题讨论】：

标签： php cakephp vue.js

【解决方案1】：

我是 VueJS 的新手，但我遇到了同样的问题。 VueJS 文档指出：

v-model 将忽略在任何表单元素上找到的初始值、选中或选定属性。它将始终将 Vue 实例数据视为事实来源。 您应该在 JavaScript 端声明初始值，在组件的 data 选项中。 https://vuejs.org/v2/guide/forms.html#Basic-Usage

因此，您需要为 data.userStatus 分配默认值。

var vm = new Vue({
    el: '#app',
    data: {
        statusModel: 2 // The default value goes here
    }
});

PHP端：

<div class="fields">
    <?= $this->Form->input('email', [
        'label' => __('Email'),
        'type' => 'email',
        'v-model' => 'emailModel',
        'placeholder' => __('Required'),
        '@keydown.enter.stop.prevent' => 'return false;',
        '@keyup.enter.stop.prevent' => 'onSubmit()'
    ]); ?>
    <?= $this->Form->input('status', [
        'label' => __('Status'),
        'type' => 'select',
        'v-model' => 'statusModel',
        'options' => [
            1 => 'Active',
            2 => 'Inactive'
        ],
        '@keydown.enter.stop.prevent' => 'return false;',
        '@keyup.enter.stop.prevent' => 'onSubmit()'
    ]); ?>
</div>

希望这会有所帮助。

【讨论】：