我想獲取屬性的所有值并將其存盤為陣列。我試過這種方式
data() {
return {
roomList: null
}
},
methods: {
getRooms() {
var that = this
axios.get('http://localhost:3000/roomList')
.then(function(response) {
that.roomList = response.data
})
let roomLists = that.roomList.map(i => i.name) //getting the property values
return roomLists;
},
},
mounted: function () {
this.getRooms()
},
我很確定我把map函式放在了錯誤的地方。我試過把它放進去，data但效果不佳。我似乎無法弄清楚我應該把那個功能放在哪里。如果有人可以幫助我，我將不勝感激。謝謝你。
uj5u.com熱心網友回復：
我在這里要做的是將完整roomsList資料保存在您的data屬性中并創建一個計算屬性以僅提取與支持資料保持同步的名稱。
您還應該初始化roomsList為陣列
export default {
data: () => ({ roomsList: [] }),
computed: {
roomNames: ({ roomsList }) => roomsList.map(({ name }) => name)
},
methods: {
async getRooms () {
const { data } = await axios.get('http://localhost:3000/roomList');
this.roomsList = data;
}
},
mounted () {
this.getRooms()
},
};
您的模板可能看起來像這樣
<ul>
<li v-for="roomName in roomNames">{{ roomName }}</li>
</ul>
uj5u.com熱心網友回復：
如果我理解正確，請查看以下代碼段：
new Vue({
el: "#demo",
data() {
return {
roomList: null
}
},
computed: {
roomLists() {
return this.roomList?.map(i => i.name)
}
},
methods: {
getRooms() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then((response) => {
this.roomList = response.data
})
},
},
mounted() {
this.getRooms()
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv 72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="demo">
{{roomLists}}
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/442223.html
上一篇：NuxtJS如何將顏色從商店json傳輸到cssvars？
下一篇：npm卸載在Mac終端中不起作用