首頁(yè) 猿問(wèn) 有沒(méi)有一種標(biāo)準(zhǔn)的方法可以向 Vue...

有沒(méi)有一種標(biāo)準(zhǔn)的方法可以向 Vue 添加演示信息？

JavaScript

12345678_0001 2022-10-13 15:44:11

假設(shè)我有一個(gè) Vue 組件，其中包含以下數(shù)據(jù)，這些數(shù)據(jù)已從 API 中檢索：data: () => ({ books: [ {name: 'The Voyage of the Beagle', author: 'Charles Darwin'}, {name: 'Metamorphoses', author: 'Ovid'}, {name: 'The Interpretation of Dreams', author: 'Sigmund Freud'}, ],}),我想為每本書存儲(chǔ)表示變量，例如一個(gè)打開的布爾值來(lái)確定這本書是否打開。不過(guò)，我不希望 API 返回這些變量，因?yàn)槲也幌Ｍ?API 被演示數(shù)據(jù)弄得雜亂無(wú)章。在 Vue 中是否有這樣做的標(biāo)準(zhǔn)方法？

查看完整描述

4 回答

海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以在收到來(lái)自 API 的信息后添加演示數(shù)據(jù)：

...

data: () => ({ books: [] });

...

methods: {

// API call to get the books

async requestBooks() {

// TODO: add try catch block

const books = await getBooks(); // Your API call

this.books = addPresentationInformation(books);

},

addPresentationInformation(books) {

return books.map(book => {

return {

...book, // default format from API (name, author)

open: false, // add the open variable to the object

reading: false,

currentPage: 0

}

});

}

},

created() {

this.requestBooks(); // Call the api on created hook to initialize the books data prop

}

你可以根據(jù)需要添加許多表示變量，我推薦使用 vuex 來(lái)存儲(chǔ)書籍及其表示變量，這樣你就可以將每本書的信息保存在本地存儲(chǔ)中，這樣在重新啟動(dòng)應(yīng)用程序后，你就可以知道某本書是否是當(dāng)前正在閱讀或正在打開。

反對(duì) 回復(fù) 2022-10-13

千巷貓影

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

可能另一種方法是復(fù)制對(duì)象并對(duì)其進(jìn)行修改并保留原始響應(yīng)數(shù)據(jù)

data(){

let data = Object.assign({}, this);

// add necessary presentation data

return data;

}

反對(duì) 回復(fù) 2022-10-13

蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

我現(xiàn)在使用normalizr來(lái)處理和展平來(lái)自后端 API 的響應(yīng)，這個(gè)庫(kù)提供了一種添加額外數(shù)據(jù)的方法。例如，下面schema添加了hiddendata 屬性。

const taskSchema = new schema.Entity(

'tasks',

{},

{

// add presentation data

processStrategy: (value) => ({

...value,

hidden: false

}),

}

);

反對(duì) 回復(fù) 2022-10-13

千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

我個(gè)人會(huì)維護(hù)另一個(gè)數(shù)組，其中包含與每本書相關(guān)的一些狀態(tài)，而不是嘗試改變 API 響應(yīng)數(shù)據(jù)。但這只是我。

反對(duì) 回復(fù) 2022-10-13

4 回答
0 關(guān)注
194 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

有沒(méi)有一種標(biāo)準(zhǔn)的方法可以向 Vue 添加演示信息？

有沒(méi)有一種標(biāo)準(zhǔn)的方法可以向 Vue 添加演示信息？

4 回答

添加回答

有沒(méi)有一種標(biāo)準(zhǔn)的方法可以向 Vue 添加演示信息？

有沒(méi)有一種標(biāo)準(zhǔn)的方法可以向 Vue 添加演示信息？