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

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

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

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

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

1 回答

?
海綿寶寶撒

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

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


當(dāng)您設(shè)置 時editedItem.school,您應(yīng)該通過 將其轉(zhuǎn)換回字符串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 上的示例演示。


查看完整回答
反對 回復(fù) 2023-02-17
  • 1 回答
  • 0 關(guān)注
  • 109 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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