Vue ReferenceError: slugify is not defined

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'，输入的数据未正确绑定到 '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' 添加到您的数据属性，并将其声明为空字符串或 NULL 值（正如您已经对名称数据属性所做的那样）。

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


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

Vue ReferenceError: slugify is not defined

Vue ReferenceError: slugify is not defined

javascript

laravel

twitter-bootstrap

vue.js

laravel-spark