Vue/Vuex/Buefy-与Vue.js中的select元素、默认选项和占位符文本不一致

这是一个Vue/Vuex/uefy前端。我发现select元素的行为不一致，无法调试。我已经能够创建一个页面加载到的默认选项，并且在我添加一个新帐户后（我认为是由于它重新提交），元素将显示这个默认选项。但是，表单提交后，元素将显示其占位符文本，并且在从select（使用removeAccount函数）中删除选项后，select完全为空

理想情况下，我不需要一个默认选项，只需要能够在页面加载和这三个事件之后加载带有占位符文本的元素，但是返回到默认值将是一个可接受的选择，我只是希望它保持一致。我曾尝试使用一种方法来强制重新渲染器，该方法会增加绑定到元素上键的数据值，但没有成功

这是回购协议，如果需要，我可以发布更多代码。

选择或创建帐户
{{account.name}
添加新帐户

您确定要永久删除此帐户吗？


与此帐户关联的所有交易记录也将被删除。

取消
删除帐户
从“vuex”导入{mapActions、mapGetter、mapTranslations}；
导出默认值{
名称：“TransactionFormAccount”，
数据：（）=>({
显示按钮：错误，
showAddAccount:false，
已选择：“”，
新帐户：“”，
isModalActive:错，
}),
计算：{
账户：{
得到（）{
返回此。$store.state.transactions.transaction.account；
},
集合（帐户）{
此.$store.commit（'transactions/SET_TRANSACTION_ACCOUNT'，ACCOUNT）；
},
},
图标：{
得到（）{
如果（this.account？.name&！this.showButtons）返回“删除大纲”；
如果（此.showButtons）返回“关闭”；
返回“加号”；
},
},
…地图绘制者({
账户：“交易/账户”，
accountInvalid:'事务/accountInvalid'，
accountValidation:“事务/accountValidation”，
}),
},
更新之前（）{
如果（！this.accounts.length）{
this.showButtons=true；
this.showAddAccount=true；
}
},
方法：{
…映射操作({
addAccount:“交易记录/addAccount”，
removeAccount:“事务/removeAccount”，
}),
…地图突变({
setError:“事务/设置错误”，
setAccount:“交易/设置交易帐户”，
}),
异步addNewAccount（）{
如果（！this.newAccount）{
这是一个错误({
名称：'帐户'，
错误：{消息：'请输入帐户名'}，
});
}否则{
等待此.addAccount（此.newAccount）；
this.showAddAccount=false；
this.showButtons=false；
}
},
toggleAddAccount（）{
如果（！this.accounts.length&&this.showButtons）{
这是一个错误({
名称：'帐户'，
错误：{消息：'您必须添加一个帐户以与每个事务关联'}，
});
}
this.showAddAccount=！this.showAddAccount；
this.showButtons=！this.showButtons；
this.newAccount=''；
},
更新计数（e）{
此.$store.commit（'transactions/SET_TRANSACTION_ACCOUNT'，e）；
},
setEventHandler（）{
if（this.account？.name&！this.showButtons）{
this.isModalActive=true；
返回false；
}
如果（this.showButtons）返回此.toggleAddAccount（）；
返回此.toggleAddAccount（）；
},
closeModal（）{
this.isModalActive=false；
},
异步removeSelectedAccount（）{
等待此.removeAccount（此.account）；
这个.closeModal（）；
},
},
};

<template>
  <div class="mb-5">
    <div v-if="!showAddAccount">
      <b-field label="Account" for="account" :message="accountValidation" :type="accountInvalid">
        <b-select
          @focus="setError({ name: 'account', error: {} })"
          v-model="account"
          id="account"
          name="account"
          placeholder="Select or create an account"
          icon="cash"
          expanded
        >
          <option value="" selected>
            Select or create an account
          </option>
          <option v-for="account in accounts" :key="account.id" :value="account">
            {{ account.name }}
          </option>
        </b-select>
        <button type="button" class="button ml-3" @click="setEventHandler(account)">
          <b-icon :icon="icon" />
        </button>
      </b-field>
    </div>
    <div v-if="showAddAccount">
      <b-field label="Add New Account" for="addNewAccount" :message="accountValidation" :type="accountInvalid">
        <b-input
          @focus="setError({ name: 'account', error: {} })"
          v-model="newAccount"
          ref="addNewAccount"
          id="addNewAccount"
          name="addNewAccount"
          placeholder="i.e. Personal Savings"
          expanded
        />
        <button type="button" class="button ml-3" @click="setEventHandler">
          <b-icon :icon="icon" />
        </button>
      </b-field>
    </div>
    <div v-if="showButtons" class="buttons is-centered mt-4">
      <b-button type="is-success is-light" icon-left="plus-circle" @click="addNewAccount()">
        Add New Account
      </b-button>
    </div>
    <b-modal v-model="isModalActive" has-modal-card trap-focus aria-role="dialog" aria-modal>
      <div class="modal-card" style="width: auto">
        <header class="modal-card-head">
          <p class="modal-card-title is-size-6 has-text-centered has-text-weight-bold">
            Are you sure you want to permanently delete this account?
          </p>
          <button type="button" class="delete" @click="closeModal" />
        </header>
        <section class="modal-card-body has-text-centered py-6 px-6">
          <p class="subtitle is-5 has-text-danger has-text-weight-bold">
            All transactions associated with this account will also be removed.
          </p>
        </section>
        <footer class="modal-card-foot">
          <button class="button" type="button" @click="closeModal">Cancel</button>
          <button class="button is-danger" type="button" @click="removeSelectedAccount">
            Remove Account
          </button>
        </footer>
      </div>
    </b-modal>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations } from 'vuex';

export default {
  name: 'TransactionFormAccount',
  data: () => ({
    showButtons: false,
    showAddAccount: false,
    selected: '',
    newAccount: '',
    isModalActive: false,
  }),
  computed: {
    account: {
      get() {
        return this.$store.state.transactions.transaction.account;
      },
      set(account) {
        this.$store.commit('transactions/SET_TRANSACTION_ACCOUNT', account);
      },
    },
    icon: {
      get() {
        if (this.account?.name && !this.showButtons) return 'delete-outline';
        if (this.showButtons) return 'close';
        return 'plus';
      },
    },
    ...mapGetters({
      accounts: 'transactions/accounts',
      accountInvalid: 'transactions/accountInvalid',
      accountValidation: 'transactions/accountValidation',
    }),
  },
  beforeUpdate() {
    if (!this.accounts.length) {
      this.showButtons = true;
      this.showAddAccount = true;
    }
  },
  methods: {
    ...mapActions({
      addAccount: 'transactions/addAccount',
      removeAccount: 'transactions/removeAccount',
    }),
    ...mapMutations({
      setError: 'transactions/SET_ERROR',
      setAccount: 'transactions/SET_TRANSACTION_ACCOUNT',
    }),
    async addNewAccount() {
      if (!this.newAccount) {
        this.setError({
          name: 'account',
          error: { message: 'Please enter an account name' },
        });
      } else {
        await this.addAccount(this.newAccount);
        this.showAddAccount = false;
        this.showButtons = false;
      }
    },
    toggleAddAccount() {
      if (!this.accounts.length && this.showButtons) {
        this.setError({
          name: 'account',
          error: { message: 'You must add an account to associate with each transaction' },
        });
      }
      this.showAddAccount = !this.showAddAccount;
      this.showButtons = !this.showButtons;
      this.newAccount = '';
    },
    updateAccount(e) {
      this.$store.commit('transactions/SET_TRANSACTION_ACCOUNT', e);
    },
    setEventHandler() {
      if (this.account?.name && !this.showButtons) {
        this.isModalActive = true;
        return false;
      }
      if (this.showButtons) return this.toggleAddAccount();
      return this.toggleAddAccount();
    },
    closeModal() {
      this.isModalActive = false;
    },
    async removeSelectedAccount() {
      await this.removeAccount(this.account);
      this.closeModal();
    },
  },
};
</script>