CakePHP 3和VueJS -使用v-model设置默认的Form's选择框 - CakePHP 3 and VueJS - use v-model to set default Form's selectbox

CakePHP 3 and VueJS - use v-model to set default Form's selectbox

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

这对文本框都很好，因为数据被正确地绑定了。但对于<select>场，v型模型似乎不起作用。我试过使用默认属性的形式->输入()，但没有帮助。下面是一些代码:

<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的值。

我该如何解决这个问题?

我是VueJS的新手，但我遇到了同样的问题。VueJS文档说明:

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

因此，您需要分配数据。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>