Question

我正在使用VueJS，我有一个包含两个字段的表单。用户需要输入第一个字段，我希望使用第一个字段中的值计算第二个字段的值，并将其传递给方法。

HTML

<div id="app">
    <input type="text" v-model="value.label">
    <input type="text" v-model="value.slug"> 
  <!-- Slug value to display here -->
  <br /><br />
  {{value}}
</div>

的Javascript

new Vue({
    el:'#app',
    data:{
        value:{
            label: '',
            slug: ''    // This value is calculated by passing label to santiize()
        }
    },
    computed: {
    },
  methods: {
   sanitize (label) {
    return label+'something'
   }
  }
});

用户输入更新value.label
我们需要通过sanitize（）方法传递value.label并更新value.slug。这也应该立即显示在表单字段中。我不知道该怎么做。因此，如果用户在表单字段中没有输入任何内容，则会按照描述返回自动值。
如果我们允许用户绕过santize函数返回的内容，那么它本身就会很棒，如果用户决定在表单字段中自己键入slug值。因此，如果用户决定键入，则将设置键入的值。

我为它创造了这个小提琴 - https://jsfiddle.net/9z61hvx0/8/

Answer 1

我能够通过改变数据结构并将观察者添加到'标签...来解决问题...

new Vue({
    el:'#app',
    data:{
        label:'',
    slug: ''
    },
    computed: {
    computedSlug () {
    return this.value.label+'Manish'
    }
    },
  watch: {
    label: function () {
        this.slug = this.sanitize(this.label)
    }
  },
  methods: {
   sanitize (label) {
    return label+'something'
   }
  }
});

欢迎任何其他更复杂的答案：）

基于VueJS中的方法更新表单数据

1 个答案: