未在實例上定義的屬性或方法

Question

我正在嘗試創建一個觀察者來綁定來自輸入的值，通過一個方法運行它並在頁面上顯示該值。 它是我正在使用的一個相當簡單的代碼示例，但我相信我有一個范圍界定問題，但我沒有發現任何問題。

我嘗試更改一些內容，例如convertTitle函數范圍。 例如但我得到了同樣的錯誤

convertTitle() {
return Slug(this.title)
}

我的 Vue 組件 -

<template>
    <div class="slug-widget">
        <span class="root-url">{{url}}</span>
        <span class="slug" v-if="slug !== nil">{{slug}}</span>
    </div>
</template>

<script>
    export default {
        props: {
            url: {
                type: String,
                required: true
            },
            title: {
                type: String,
                required: true
            }
        },
        data: function() {
            return {
                slug: this.convertTitle()
            }
        },
        methods: {
            convertTitle: function() {
                return Slug(this.title)
            }
        },
        watch: {
            title: function(val) {
                this.slug = this.convertTitle();
            }
        }
    }
</script>

My Blade Partial 帶輸入 -

@extends('admin.admin')

@section('content')
<div class="row">
    <div class="col-md-9">
        <div class="row">
            <h1>Create new page</h1>
        </div>
        <div class="row">
            <div class="pcard">
                <form action="" method="POST" class="">
                    {{ csrf_field() }}

                    <label>Title</label>
                    <input type="text" name="page-title" placeholder="" v-model="title">
                    <slug-widget url="{{url('/')}}" :title="title"></slug-widget>
                </form>
            </div>          
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: ''
        }
    });
</script>
@endsection

完整的錯誤跟蹤 -

[Vue 警告]：屬性或方法“標題”未在實例上定義，但在渲染期間被引用。 通過初始化該屬性，確保該屬性是反應性的，無論是在數據選項中，還是對於基於類的組件。 請參閱： https ://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

（在 <Root> 中找到）

用計算更新 -

export default {
      props: {
          url: {
              type: String,
              required: true
          },
          title: {
              type: String,
              required: true
          }
      },
      computed: {
          slug() {
              return Slug(this.title)
          }
      }
    }

通過從app.js中刪除以下代碼段解決了該錯誤

const app = new Vue({
    el: '#app'
});

Answer 1

您不應該也不應該需要一個函數調用來提供data中某些內容的值。

聽起來您只需要將 convertTitle() 放入computed中然后就可以走了？