Vue ReferenceError:未定义slugify

Question

因此，我正在尝试从一个输入中获取值，并将其转换为段塞，以便在另一个输入上显示。我使用的是Laravel Spark、Vue和Bootstrap 4。

到目前为止，我在listings.blade.php中有以下内容

<createlisting inline-template>
  <div class="container">
    
  <h1>
    Create a listing
  </h1>
  <form class="form">
      <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" v-on:keyup="listingslug" id="name" name="name" placeholder="Example input placeholder">
  </div>
      <label for="slug">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">{{ env('APP_URL') }}/listing/</span>
  </div>
  <input type="text" class="form-control" id="slug" name="slug" aria-describedby="basic-addon3">
</div>
  </form>
</div>
</createlisting>

我在一个createlisting.js文件中有这个文件

Vue.component('createlisting', {
    data() {
        return {
            form: new SparkForm({
                name: '',
                description: ''
            })
        };
    },
    methods: {
      slugify: function(text) {
        return text
          .toString()                     // Cast to string
          .toLowerCase()                  // Convert the string to lowercase letters
          .normalize('NFD')       // The normalize() method returns the Unicode Normalization Form of a given string.
          .trim()                         // Remove whitespace from both sides of a string
          .replace(/\s+/g, '-')           // Replace spaces with -
         .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
          .replace(/\-\-+/g, '-');        // Replace multiple - with single -
      },
      listingslug: function(text) {
        document.getElementById("slug").value = this.slugify(text); 
      }
    }
});

我将custom.js文件中的slugify函数(如下所示)添加到我的Vue组件网中，看看这是否有帮助。

/**
*   This is the slugify function, to allow us to slugify text
*/
function slugify(text) {
  return text
    .toString()                     // Cast to string
    .toLowerCase()                  // Convert the string to lowercase letters
    .normalize('NFD')       // The normalize() method returns the Unicode Normalization Form of a given string.
    .trim()                         // Remove whitespace from both sides of a string
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-');        // Replace multiple - with single -
}

当涉及到Vue时，我是一个新手，在Javascript方面，我仍然是一个相当初级的人。我做错了什么？

另一个部分是将vue模板中的slugify(text)更改为this.slugify(text)，然后输出为"object-keyboardevent“。

Answer 1

我认为这里的部分问题是，对于您输入的文本，您想要'slugified'，输入的数据没有正确地绑定到'name‘值(至少不是以'Vuey’的方式)。

您可以通过使用v-model绑定它来实现，如下所示：

//note that I removed your v-on:keyup, and placeholder="Example input placeholder" for simplicity/demo purposes

<input type="text" class="form-control" id="name" name="name" v-model="name">

请参阅关于v-model/Form输入绑定的Vue文档：https://vuejs.org/v2/guide/forms.html

你可以考虑使用一个用@click监听点击的按钮，而不是使用快捷键。然后你可以通过点击来调用你的方法'listingslug‘。

所以它看起来就像这样：

<button @click="listingslug">Slugify</button>

有关活动的更多详细信息，请参阅有关主题的官方Vue文档：https://vuejs.org/v2/guide/events.html

然后您可以将'slugified‘输出输入值设置为数据值，如下所示：

<input type="text" class="form-control" id="slug" name="slug" value="{{slugified}}" aria-describedby="basic-addon3">

但要让它起作用，您还需要将'slugified‘添加到您的data属性中，并将其声明为一个空字符串或null值(就像您已经对name data属性所做的那样)。

这将更改listingslug方法，使其如下所示：

listingslug: function() {
        this.slugified = this.slugify(this.name); 
      }