vuetify - 根據按鈕的狀態更改 v-select 項

Question

因此，我試圖根據已在“啟用”和“禁用”之間更改的按鈕的狀態，使選擇器具有不同的項目。 我嘗試使用 v-if 和 v-else 但我覺得這是錯誤的方法並且也不起作用。 我覺得這更接近我需要使用的東西，但我不確定我做得對。 下面是html

<v-col class="col-3">
            <v-select
              :items="rulesForOptionsLevel"
              outlined
              dense
              :disabled="
                accountFeatures.optionsTrading === 'Disabled' ? true : false
              "
              v-model="accountFeatures.optionsLevel"
              @change="changeOptionsLevel"
              :menu-props="{ top: true, offsetY: true }"
              label="Level"
            ></v-select>
          </v-col>

這是下面的腳本。 同樣在腳本中，我在數據中創建了一個 items[] 空

methods: {
    rulesForOptionsLevel() {
    if (accountFeatures.equityTrading === "Disabled") {
      items: ["unavailable", "optionsLevel1", "optionsLevel2"];
    } else {
      items: [
        "unavailable",
        "optionsLevel1",
        "optionsLevel2",
        "optionsLevel3",
        "optionsLevel4",
        "optionsLevel5",
        "optionsLevel6",
      ];
    }
    },

Answer 1

簡單地將rulesForOptionsLevel方法更改為計算屬性。

 Vue.config.productionTip = false; Vue.config.devtools = false; new Vue({ el: "#app", vuetify: new Vuetify(), data() { return { accountFeatures: { optionsTrading: "disabled", optionsLevel: "", equityTrading: "Disabled" } }; }, methods: { changeOptionsLevel() { console.log('Options changed!'); }, toggleEquityTrading(){ if(this.accountFeatures.equityTrading=="Enabled") this.accountFeatures.equityTrading = "Disabled"; else this.accountFeatures.equityTrading = "Enabled"; console.log(`accountFeatures.equityTrading: ${this.accountFeatures.equityTrading}`); } }, computed: { rulesForOptionsLevel() { if (this.accountFeatures.equityTrading === "Disabled") return ["unavailable", "optionsLevel1", "optionsLevel2"]; else return [ "unavailable", "optionsLevel1", "optionsLevel2", "optionsLevel3", "optionsLevel4", "optionsLevel5", "optionsLevel6", ]; }, }, });

 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <div id="app"> <v-app> <v-col class="col-3"> <v-select :items="rulesForOptionsLevel" outlined dense :disabled="accountFeatures.optionsTrading === 'Disabled' ? true : false" v-model="accountFeatures.optionsLevel" @change="changeOptionsLevel" :menu-props="{ top: true, offsetY: true }" label="Level"></v-select> </v-col> <v-btn elevation="2" @click="toggleEquityTrading()">Toggle Equity</v-btn> </v-app> </div>

Answer 2

弄清楚了。 不需要該功能，您可以簡單地使用與禁用之類的方法相同的方法。 如果那個 accountFeatures.margin 等於 disabled 那么它選擇 items，如果不是那么它選擇 items2

] <v-select
              :items="accountFeatures.margin === 'Disabled' ? items : items2"
              outlined
              dense
              :disabled="
                accountFeatures.optionsTrading === 'Disabled' ? true : false
              "
              v-model="accountFeatures.optionsLevel"
              @change="changeOptionsLevel"
              :menu-props="{ top: true, offsetY: true }"
              label="Level"
            ></v-select>