Vue ReferenceError：未定义slugify

问题描述

因此，我试图使从一个输入中获取值并将其变成一个块，以显示在另一输入上成为可能。我正在使用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”。

解决方法

我认为这里的部分问题是，对于要输入文本的输入，您希望对其进行“细分”，输入的数据未正确绑定到“名称”值（至少不是在“非常”方式。

您可以这样使用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'，并将其声明为空字符串或NULL值（就像已经对name data属性所做的那样）。

那会改变您的listingslug方法，看起来像这样：

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