亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何獲得帶有“多個”道具的 Vuetify Select 字段以與數據庫中的 axios

如何獲得帶有“多個”道具的 Vuetify Select 字段以與數據庫中的 axios

森林海 2023-02-17 10:56:54
我有一個項目是在學習 Vue 的同時為學區建設的。我設置了 axios 并與其他幾個字段一起使用以從 mysql 數據庫獲取和編輯數據,但我堅持在 v-select 組件上使用 multiple prop。我已經意識到它與數據類型有關。在數據庫中,學校是一個String,但是v-select multiple 需要一個Array。我正在使用 Vuetify 數據表和一個打開的對話框來編輯用戶信息。其中一個選項是學校字段,它應該能夠為用戶分配多個學校。這是那個字段:<v-select   :items='schools'   v-model='schoolArray'   label='School'   multiple   item-text='school'></v-select>通常,v-model 會有“editedItem.school”,但它會返回一個字符串,而我需要一個數組。我有一個計算屬性來將學校數據更改為數組:schoolArray (item) {  return this.editedItem.school.split(',') }這現在讓我看到數據庫中有哪些學校而不是空字段,但這給了我一個錯誤“[Vue warn]:已將計算屬性“schoolArray”分配給但它沒有設置器?!彼?,我把它改成這樣:schoolArray: {  get: function () {    var stringToArray = this.editedItem.school.slice(0).split(',')    return stringToArray   },  set: function (school) {    this.editedItem.school = school   } }現在,我得到的錯誤是'[Vue warn]: 渲染錯誤:“TypeError: this.editedItem.school.slice(...).split 不是一個函數”'我覺得我缺少一些基本的東西,但我仍在努力學習 Vue 和 Vuetify。任何幫助或指導將不勝感激。
查看完整描述

1 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

問題是您將設置editedItem.school為array而不是string,因此它會抱怨您不能設置split()數組。


當您設置 時editedItem.school,您應該通過 將其轉換回字符串Array.join(",")。


export default {

  data: () => ({

    schools: ["Schools 1", "Schools 2", "Schools 3"],

    editedItem: {...} 

  }),


  computed: {

    schoolArray: {

      get: function() {

        return this.editedItem.school.slice(0).split(",");

      },

      set: function(school) {

        // set it back to a string using `join(",")`

        this.editedItem.school = school.join(","); 

      }

    }

  }

}

這是 codesandbox 上的示例演示。


查看完整回答
反對 回復 2023-02-17
  • 1 回答
  • 0 關注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號