使用Vue.js结合输入字段的值到第二输入栏

我有定义如下（减去非相关的字段为简洁）Symfony的形式：使用Vue.js结合输入字段的值到第二输入栏

<?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值，并进行一些较小的更改（用连字符替换空格）。我仍然希望用户能够根据需要更改slu but，但不能更新标签。

的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; 
     } 
    } 
});

是否有更好的解决我的问题？

来源

2017-02-18 Vel Eous

更多的研究和修修补补后，我想出了产生期望的结果如下：

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脚本

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

来源

2017-02-19 06:43:41

使用Vue.js结合输入字段的值到第二输入栏

回答

相关问题