第二の入力フィールド

Question

への入力フィールドの値をバインドするVue.jsを使用し、私はsymfonyの以下のように定義されたフォーム（マイナス簡潔にするために、非関連フィールド）を有する：

<?php 

namespace AppBundle\Form; 

use AppBundle\Entity\Category; 
use Symfony\Component\Form\AbstractType; 
use Symfony\Component\Form\Extension\Core\Type\TextType; 
use Symfony\Component\Form\FormBuilderInterface; 
use Symfony\Component\OptionsResolver\OptionsResolver; 

class CategoryType extends AbstractType 
{ 
    public function buildForm(FormBuilderInterface $builder, array $options) 
    { 
     $builder 
      ->add('label', TextType::class, [ 
       'label' => 'label.display_name', 
       'attr' => [ 
        'placeholder' => 'placeholder.category_name', 
        'class' => 'label', 
        '@input' => 'vUpdateSlug' 
       ] 
      ]) 
      ->add('slug', TextType::class, [ 
       'label' => 'label.slug', 
       'attr' => [ 
        'class' => 'slug', 
        '@input' => 'vUpdateSlug', 
        ':value' => 'slug' 
       ] 
      ]); 
    } 

    public function configureOptions(OptionsResolver $resolver) 
    { 
     $resolver->setDefaults([ 
      'data_class' => Category::class, 
      'category_id' => null 
     ]); 
    } 
} 

をIはVue.jsディレクティブを装着していinputの両方のフィールドに入力します。考えられるのは、誰かがlabelフィールドに入力すると、slugフィールドが自動的にlabelinputの値で更新されます（スペースはハイフンで置き換えられます）。彼らが望むなら、ユーザーがスラッグを変更できるようにしたいが、ラベルを更新しないようにしたい。

v-on:input/@inputディレクティブの動作が働くが、しかし、私はちょうどVue.jsを始めていると私の実装は少し不格好（反復）を感じている - 以下参照：

new Vue({ 
    delimiters: ['[[', ']]'], 
    el: '#category-form', 
    data: { 
     slug: this.slug = $('[name="category[slug]"]').val() 
    }, 
    ready: function() { 
     this.slug = $('[name="category[slug]"]').val(); 
    }, 
    methods: { 
     vUpdateSlug: function (event) { 
      var str = event.target.value.replace(/[^a-zA-Z0-9 -]/g, '').replace(/\s+/g, '-').toLowerCase(); 
      return this.slug = str; 
     } 
    } 
}); 

は私の問題へのよりよい解決策があります？

Answer 1

もっと研究し、工夫した後、私は望ましい結果を生成し、次のを思い付いた：

カテゴリタイプ

public function buildForm(FormBuilderInterface $builder, array $options) 
{ 
    $builder 
     ->add('label', TextType::class, [ 
      'label' => 'label.display_name', 
      'attr' => [ 
       'placeholder' => 'placeholder.category_name', 
       'class' => 'label', 
       'v-model' => 'label' 
      ] 
     ]) 
     ->add('slug', TextType::class, [ 
      'label' => 'label.slug', 
      'attr' => [ 
       'class' => 'slug', 
       '@input' => 'setSlug', 
       ':value' => 'slug' 
      ] 
     ]); 
} 

のVueスクリプト

new Vue({ 
    delimiters: ['[[', ']]'], 
    el: '#form-wrapper', 
    data: { 
     label: $('[name="category[label]"]').val(), 
     slug: $('[name="category[slug]"]').val() 
    }, 
    watch: { 
     label: function(newLabel) { 
      this.slug = this.compileSlug(newLabel) 
     } 
    }, 
    methods: { 
     compileSlug: function(input) { 
      return input.replace(/[^a-zA-Z0-9 -]/g, '') 
       .replace(/\s+/g, '-') 
       .toLowerCase(); 
     }, 
     setSlug: function (input) { 
      this.slug = this.compileSlug(input.target.value) 
     } 
    } 
}); 

JSFiddle functioning example