Vue.js：实例上未定义属性或方法

Posted 2023-02-22

【中文标题】Vue.js：实例上未定义属性或方法

【英文标题】：Vue.js: Property or method is not defined on the instance

【发布时间】：2017-08-28 18:01:01

【问题描述】：

我有一个简单的 vue 组件：

Vue.component('repo-button', 
  props:["check_in_id", "repo_id"],
  template: '#repo-button',
  methods: 
    fetchRepo: function() 
      console.log("this is working")
    
  ,
  data: function() 
    var that = this;
    return 
  
);

var repositionings = new Vue(
    el: "#repo-vue"
)

我的看法是这样的：

<script type="text/x-template" id="repo-button">
    <div class='socialCircle-item success'>
    <i class='fa fa-comment' 
      :data-check_in='check_in_id' 
      :data-repo='repo_id'> 
    </i>
    </div>
</script>

<div id="repo-vue">
    <div is="repo-button" repo_id="8" check_in_id="30" @click="fetchRepo></div>
</div>

我看到了错误：

[Vue 警告]：属性或方法“fetchRepo”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

似乎我已经注册了该方法，但是当我认为它应该是一个实例方法时，它正在根组件中查找该方法。 我应该如何包含fetchRepo 实例方法？

【参考方案1】：

您已将fetchRepo 定义为组件的方法，但您试图从组件外部调用它。

在组件内移动点击处理程序。

<script type="text/x-template" id="repo-button">
    <div class='socialCircle-item success' @click="fetchRepo">
    <i class='fa fa-comment' 
      :data-check_in='check_in_id' 
      :data-repo='repo_id'> 
    </i>
    </div>
</script>

<div id="repo-vue">
    <div is="repo-button" repo_id="8" check_in_id="30"></div>
</div>