Используя Vue.js, чтобы связать значение поля ввода во втором поле ввода

Question

У меня есть 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 
     ]); 
    } 
} 

Я прилагаю директивы Vue.js как для полей input. Идея заключается в том, что когда кто-то вводит в поле label, поле slug автоматически обновляется значением labelinput с некоторыми незначительными изменениями (заменяя пробелы дефисом). Я все еще хочу, чтобы пользователь мог изменить slug, если они того пожелают, но не имеет обновления метки.

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

После еще исследуя и лужения, я придумал, после чего производит желаемый результат:

CategoryType

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 Script

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