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>

我的刀片部分输入 -

@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 warn]：属性或方法“title”未在实例上定义，但在呈现期间引用。通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。

（在＆lt; Root＆gt;中找到）

更新了计算 -

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然后离开吗？

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

1 个答案: