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

Posted 2023-02-23

【中文标题】未在实例上定义的属性或方法

【英文标题】：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

【参考方案1】：

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

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