CakePHP 3とVueJS - v-modelを使用してデフォルトのフォームの選択ボックスを設定します

Question

私は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に置き換えた場合、{{userStatus}}自体に値2があるにもかかわらず、デフォルトのオプションがInactiveに設定されます。

これを解決するにはどうすればよいですか？

Answer 1

私は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> 

この情報がお役に立てば幸いです。