vue寫下拉列表1 then不可忘記下面的賦值

2021-09-29 13:05:33 字數 905 閱讀 9419

我們若是想要寫出乙個用vue的下拉列表,那麼首先需要在django檢視函式去查詢想要下拉列表的內容,在這就以樂隊為例,那麼我就需要去django後台查詢後傳送給前端

查詢完成,那麼想要傳送給前端就必然要經過序列化,不然會報不可序列化的錯,

這就是我經過序列化後的資料,我為什麼要在這序列化乙個【切記一定不要忘了序列化id】id,name欄位,是為了後面下拉框選項做準備,option標籤裡value需要id,欄位名需要跟資料庫**裡的欄位名對應,接下來就可以傳送給前端了

通過路由介面呼叫,然後return response返回給前端,特別注意這裡的返回資料必須是"data":data.data,不能少乙個data。這樣前端vue就可以接收了

vue就是用mounted方法接收:

res.data.data對應關係如下圖:

對應後台返回的資料

this.items對應關係如下圖:

到這裡接收變告一段落,那麼後台也告一段落,接下來就是對vue的操作

vue下拉列表去重

下面是下拉列表 select v model modelid placeholder 模板id option v for item in options 0 key item.modelid label item.modelid value item.modelid option select se...

vue 1 x 互動 仿百度下拉列表

0 前言 vue 本身不支援互動,想要做互動,必須引入ajax 模組。vue 團隊提供乙個新的庫檔案叫做 vue resource.js 網路cdn 1 用法分類 ajax 互動通常分為3類,get,post,jsonp html 部分的 陣列mydata 的資料通過ul 列表顯示出來,用 v fo...

Day1 CSS 下拉列表

一 css 下拉列表 使用 css 建立乙個滑鼠移動上去後顯示下拉列表的效果。1 基本下拉列表 滑鼠移動到我這!菜鳥教程 www.runoob.com 2 建立下拉列表,並允許使用者選取列表中的某一項 div class dropdown button class dropbtn 下拉列表 butt...