Property or method not defined on instance

Question

I'm trying to create a watcher to bind the value from an input run it through a method and display that value on the page. Its a fairly straightforward sample of code I'm working with but I believe I have a scoping issue but I don't see anything wrong.

I tried changing a few things such as the convertTitle function scoping. e.g. But I got the same error

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

My Vue Component -

<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 with input -

@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

Full error Trace -

[Vue warn]: Property or method "title" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)

Updated with compute -

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

The error was resolved by removing the following snippet from app.js

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

I don't think that error is coming from where you think it's coming from. I can't replicate it with the code you've provided, here's a working JSFiddle: jsfiddle.net/t3thr764 — craig_h

bbsimonbb bbsimonbb · Accepted Answer · 2018-03-27T12:28:32

You shouldn't have, and shouldn't ever need, a function call to supply the value of something in your data.

It sounds like you just need to put convertTitle() into a computed and away you go?

Property or method not defined on instance

1 Answers