Question

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

由于数据绑定正确，因此对文本框都有好处。但对于<select>字段，v-model似乎不起作用。我尝试过使用Form-＆gt; 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。< / p>

我该如何解决这个问题？

Answer 1

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

v-model将忽略在任何表单元素上找到的初始值，已检查或选定的属性。它总是将Vue实例数据视为真实的来源。 您应该在组件的数据选项中声明JavaScript端的初始值。 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>

希望这有帮助。

CakePHP 3和VueJS - 使用v-model设置默认Form的选择框

1 个答案: