Vue ReferenceError：未定义 slugify

Question

所以我试图从一个输入中获取值，并将其变成一个 slug，以显示在另一个输入上。我正在使用 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”，输入的数据没有正确绑定到“名称”值（至少不是在'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”添加到您的数据属性中，并将其声明为空字符串或 NULL 值（正如您已经对 name 数据属性所做的那样）。

这会将您的 listingslug 方法更改为如下所示：

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