英文:
how to get each data from response api laravel in vue js 3
问题
需要帮助，我可以从响应 API 中获取所有数据，但尝试从键“get_item_cards” 中获取数据（循环数据）时出现了一些问题。这是我的响应和 Vue.js 代码
<script setup>
<script>
import axios from 'axios';
export default {
name: 'ListNotes',
data() {
return {
cardNotes: [],
}
},
mounted() {
// console.log('Page mounted');
this.getListNotes();
},
methods: {
getListNotes() {
axios.get('http://localhost:8000/api/card').then(res => {
this.cardNotes = res.data.cardNotes;
console.log(this.cardNotes);
})
}
}
}
</script>
在 Vue.js 3 中，从关系中获取所有数据和每个数据的最佳方法是什么？
英文:
Need help , i can get all data from response api but having some problem when try to get data (looping data ) from key "get_item_cards" . Here's my response and code in vue js
<script setup>
<script>
import axios from 'axios'
export default {
name: 'ListNotes',
data() {
return {
cardNotes: [],
}
},
mounted() {
// console.log('Page mounted');
this.getListNotes();
},
methods: {
getListNotes() {
axios.get('http://localhost:8000/api/card').then(res => {
this.cardNotes = res.data.cardNotes
console.log(this.cardNotes);
})
}
}
}
</script>
how the best way to get all data & each data from relationship in vue js 3
答案1
得分: 0
由于this.cardNote返回一个包含三个元素的数组，您可以使用v-for循环并像下面这样访问get_item_cards数组，
<template>
<div>
<div v-for="(note, index) in cardNote">
<p>{{note.cardname}}</p>
<div v-for="(item, key) in note.get_item_cards">
<p>{{item.content}}</p>
</div>
</div>
</div>
</template>
<script setup>
<script>
import axios from 'axios';
export default {
name: 'ListNotes',
data() {
return {
cardNotes: [],
}
},
mounted() {
this.getListNotes();
},
methods: {
getListNotes() {
axios.get('http://localhost:8000/api/card').then(res => {
this.cardNotes = res.data.cardNotes;
console.log(this.cardNotes);
})
}
}
}
</script>
英文:
Since the this.cardNote returns an array with three elements, you can use loop using v-for and access to the get_item_cards array like below,
<template>
<div>
<div v-for=(note, index) in cardNote>
<p>{{node.cardname}}</p>
<div v-for=(item, key) in note.get_item_cards>
<p>{{item.content}}</p>
</div>
</div>
</div>
</template>
<script setup>
<script>
import axios from 'axios'
export default {
name: 'ListNotes',
data() {
return {
cardNotes: [],
}
},
mounted() {
// console.log('Page mounted');
this.getListNotes();
},
methods: {
getListNotes() {
axios.get('http://localhost:8000/api/card').then(res => {
this.cardNotes = res.data.cardNotes
console.log(this.cardNotes);
})
}
}
}
</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论