Vue |在数据内部调用方法函数

Question

栈。

问题| Codepen

我在Vue中有这段代码：

<input v-model="name" type="text"/>
<span>{{ slug }}</span>

这个数据：

data: {
   name: ''
}

这是方法：

computed: {
  slug: function() {
     return this.slugify(this.name);
  }

slugify: function(name) {
  var slug = name.toLowerCase();
  slug = slug.replace(/\s*$/g, '');
  slug = slug.replace(/\s+/g, '-');

  return slug;
}

如何在输入值中使用{{slug}}？

v-bind：Vue Docs表示，值与v-model不兼容。

问题

我需要在另一个输入中生成slug？

看起来像是：

<input v-model="name" type="text"/>
<input v-model="slug" type="text"/> <--- Here goes generated input with value = slug

Answer 1

我对此的解决方案是这样的：

new Vue({
  el: '#app',
  data: {
    title: '',
    slug: ''
  },
  methods: {
    slugify: function () {
      let slugInput = this.title.toLowerCase()
      slugInput = slugInput.replace(/\s*$/g, '');
      slugInput = slugInput.replace(/\s+/g, '-');

      this.slug = slugInput
    }
  }
});

HTML：

<div id="app">
   <input 
          v-model="title" 
          type="text"
          @input="slugify"/>

   <span>{{ title }}</span>

  <br>

     <input 
          v-model="slug" 
          type="text"/>

   <span>{{ slug }}</span>
</div>

Answer 2

执行此操作的一种方法是坚持使用v-model，然后使用@keypress和@blur原位修改名称， like this...

<强>码

new Vue({
  el: '#app',
  data: {
    title: '',
    name:''
  },
  computed: {
    slug: function() {
      return this.slugify(this.name);
    }
  },
  methods: {
    onkeypress(){
      console.log("change");
      var slug = this.name.toLowerCase();
      slug = slug.replace(/\s+/g, '-');
      this.name = slug
    },
    onblur(){
      this.name = slugify(this.name)      
    },
    slugify: function(name) {
      var slug = name.toLowerCase();
      slug = slug.replace(/\s*$/g, '');
      slug = slug.replace(/\s+/g, '-');

      return slug;
    }
  }
});

<强>标记

<div id="app">
   <input v-model="name"@keypress="onkeypress" @blur="onblur" type="text"/>
   <span>{{ slug }}</span>
</div>