为什么v-for无法呈现任何DOM？ “属性或方法“数据”未在实例上定义，但在渲染期间被引用。”

2024-05-02 • 问答

我想根据axios / vue返回的API调用渲染几个div容器。 axios调用和回调工作正常，但是vue不会呈现任何div。

自从我使用Django以来，我已经更改了大括号中的定界符（这也是Django的默认设置）。

控制台中的错误消息：

Property or method "data" 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.

请按如下所示找到一个最小的代码片段（如果删除JS部分，则会显示html）：

提前感谢您的帮助！

var app = new Vue({
  delimiters: ['[[',']]'],el: '.EUR_Quotes',data: {
    info: []
  },created() {
    axios
      .get("http://data.fixer.io/api/latest?access_key=XXXd&base=EUR")
      .then(response => {
        this.info = response.data.rates;
        console.log(response);
      });
  }
});

.EUR_Quotes {
  font-size: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<html>
<head>
    
</head>
 <body>
    
    <div v-for="rates in info">
    <div class="EUR_Quotes">[[ data ]]
    </div>
    </div>
    
 </body>
  
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
</html>

var app = new Vue({ delimiters: ['[[',']]'],el: '.EUR_Quotes',data: { info: [] },created() { axios .get("http://data.fixer.io/api/latest?access_key=d&base=EUR") .then(response => { this.info = response.data.rates; console.log(response); }); } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> <html> <head> </head> <body> <div v-for="rates in info"> <div class="EUR_Quotes">[[ info ]] </div> </div> </body> <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </html>

为什么v-for无法呈现任何DOM？ “属性或方法“数据”未在实例上定义，但在渲染期间被引用。”

duxinlang 回答：为什么v-for无法呈现任何DOM？ “属性或方法“数据”未在实例上定义，但在渲染期间被引用。”

大家都在问