未在实例上定义的属性或方法答案

【问题标题】：Property or method not defined on instance未在实例上定义的属性或方法
【发布时间】：2018-09-05 19:48:44
【问题描述】：

我正在尝试创建一个观察程序来绑定来自输入的值，通过一个方法运行它并在页面上显示该值。这是我正在使用的一个相当简单的代码示例，但我相信我有一个范围问题，但我没有发现任何问题。

我尝试更改一些内容，例如 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 警告]：属性或方法“title”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

（在中找到）

使用计算更新 -

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

通过从 app.js 中删除以下 sn-p 解决了该错误

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

【问题讨论】：

试试这样：data() { return { title: '', } },
我不认为错误来自你认为它来自哪里。我无法使用您提供的代码复制它，这是一个有效的 JSFiddle：jsfiddle.net/t3thr764

标签： laravel laravel-5 vue.js vuejs2

【解决方案1】：

您不应该也不应该需要一个函数调用来提供 data 中某些内容的值。

听起来您只需将 convertTitle() 放入 computed 就可以了？

【讨论】：