Vue.js中的数据提取单个文件组件

  • Z时代
  • 2024-01-10
  • 分类：问答

我的数据提取在全局使用时工作正常，但是一旦我坚持单个文件组件不会返回项目。我做错了什么？Vue.js中的数据提取单个文件组件

ladeditems.vue

<template> 
<div> 
    <ul v-for="item in items"> 
    <li> 
     {{item.title}} 
    </li> 
    </ul> 
</div> 
</template> 
<script> 
export default { 
    components: {'tiny-slider': VueTinySlider}, 
    name: 'ladeditems', 
    data: { 
    items: null 
    }, 
    methods: { 
    fetchData: function() { 
     let self = this 
     const myRequest = new Request('https://jsonplaceholder.typicode.com/posts') 
     fetch(myRequest) 
     .then((response) => { return response.json() }) 
     .then((data) => { 
      self.items = data 
      // console.log(self.items) 
     }).catch(error => { console.log(error); }); 
    } 
    }, 
    mounted() { 
    this.fetchData() 
    } 
} 
</script>

回答：

你data声明不正确，应该是这样的：

data: function() { 
    return { 
    items: null 
    } 
}

此信息是在这里：data。总之它必须是一个返回对象的函数。这应该允许该财产对您的更改产生反应。

另外值得注意的是，fetch未在您提供的代码中声明，所以我认为这是一个全局声明。如果不是，它是一个混合，那么你需要将其范围与this.fetch(...)

回答：

https://vuejs.org/v2/api/#data

当定义一个组件，数据必须被声明为返回初始数据对象的功能，因为会有使用创建的许多实例相同的定义。如果我们使用普通对象作为数据，那么所有创建的实例将通过引用来共享相同的对象！通过提供数据函数，每次创建新实例时，我们都可以调用它来返回初始数据的全新副本。

以上是 Vue.js中的数据提取单个文件组件 的全部内容， 来源链接： utcz.com/qa/261661.html

回到顶部