[Vue 警告]：属性或方法“hp”未在实例上定义，但在渲染期间引用

Posted 2023-02-23

【中文标题】[Vue 警告]：属性或方法“hp”未在实例上定义，但在渲染期间引用

【英文标题】：[Vue warn]: Property or method "hp" is not defined on the instance but referenced during render

【发布时间】：2020-06-22 21:06:11

【问题描述】：

我有以下代码：

var example1;
var hp = ["p"];

document.addEventListener("DOMContentLoaded", function(event) 
  hp = ["x"];
  example1 = new Vue(
    el: '#example-1', //yes i have an element with #example-1 (not relevant here)
    data: 
      iLoveMyself: window.hp
    ,

    watch: 
      iLoveMyself: 
        deep: true,
        immediate: true,
        handler (val, oldVal) 
          console.log("yeeeh")
        
      
    
  )
);

我尝试了很多东西（这就是为什么我的代码 ^ 如此丑陋）但我保留了这个 console.error:

vue.js:634 [Vue warn]: Property or method "hp" 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.

如果我在 VueJs 的 chrome 插件中查找值，数据集如下：

iLoveMyself:Array[1]
0:"x"

到目前为止一切都很好，但是当尝试更新 hp 时：

hp.push("y");
hp.pop();
hp = "ZEBRA";

我没有得到任何回应。

什么是我不明白的？

提前表示感谢！

编辑： 所以毕竟我开始收集碎片，我的html毕竟很重要：/

<div id="example-1">
  <div v-for="ev in hp" :key="ev.beavus">
     ev.beavus 
  </div>
</div>

【问题讨论】：

该错误表明您正在尝试在模板中使用名为hp 的属性。但是，您尚未在 Vue 实例上定义名为 hp 的属性。在示例代码中，您有一个名为iLoveMyself 的属性。您有一个名为hp 的变量，但在模板中无法访问它，即使它是全局变量。它必须是实例的属性，否则模板将无法看到它。

请分享模板

@skirtle 我很困惑，请给我一点时间

@BoussadjraBrahim 我进行了编辑

v-for="ev in hp" 引用 hp。您需要将其更改为 iLoveMyself 以匹配实例上的属性。要么将iLoveMyself重命名为hp。

【参考方案1】：

这是您在问题中发布的更惯用的 Vue 实现：

new Vue(
  el: '#example-1',

  data: 
    iLoveMyself: [beavus: "x"]
  ,

  watch: 
    iLoveMyself: 
      deep: true,
      immediate: true,
      handler (val, oldVal) 
        console.log("yeeeh")
      
    
  ,
  
  methods: 
    add () 
      this.iLoveMyself.push(beavus: Math.random())
    
  
);

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="example-1">
  <div v-for="ev in iLoveMyself" :key="ev.beavus">
     ev.beavus 
  </div>
  <button @click="add">Add</button>
</div>
  

我已经摆脱了全局变量，现在只有一个名为 iLoveMyself 的实例属性来保存数组。将额外数据推送到数组会触发 watch 并使用新数据更新 DOM。

【参考方案2】：

你应该这样做：

<div id="example-1">
  <div v-for="ev in iLoveMyself" :key="ev.beavus">
     ev.beavus 
  </div>
</div>

【讨论】：

是的，确实消除了错误，但在更新 var hp 时仍然没有响应

该属性不是响应式的，请准确说明您的用例，我们希望找到一种尊重 Vue 范式的方法

我认为使用可观察到的适合您的情况请查看这篇文章vuedose.tips/tips/creating-a-store-without-vuex-in-vue-js-2-6