无法自动设置检查值，如获得更新的值

Question

我有一个VUE JS模板，其中包含两个最初未经检查的无线电按钮。小部件渲染后，我希望在从后端服务器检索其后更新的值时自动检查其中一个无线电按钮。

这是如下所示的代码：

<template>
  <div>
    <CCard class="card">
      <CCardHeader>{{ $t("SETTINGS.NOTIFICATIONS.HEADER") }}</CCardHeader>
      <CCardBody>
        <table>
          <tr>
            <td class="index">
              <strong>
                {{ $t("SETTINGS.NOTIFICATIONS.DISBURSEMENT_INDEX") }}
              </strong>
              <img
                src="@/assets/img/blue-circle.svg"
                class="info pointer-on-hover"
                v-c-tooltip="{
                  html: true,
                  content: getDisbursementTooltipContent,
                  active: false,
                  placement: 'top',
                }"
              >
            </td>
            <td class="category">
              <fieldset id="disbursement-group">
                <input
                  id="whatsapp"
                  type="radio"
                  name="disbursement-group"
                  value="whatsapp"
                  @change="selectDisbursementPreference"
                  :checked="disbursementPreference === whatsapp"
                >
                <span class="text">Whatsapp</span>
              </fieldset>
            </td>
            <td class="category">
              <fieldset id="disbursement-group">
                <input
                  id="email"
                  type="radio"
                  name="disbursement-group"
                  value="email"
                  @change="selectDisbursementPreference"
                  :checked="disbursementPreference === email"
                >
                <span class="text">Email</span>
              </fieldset>
            </td>
          </tr>
          <br>
          <tr hidden>
            <td class="index">
              <strong>
                {{ $t("SETTINGS.NOTIFICATIONS.SETTLEMENT_INDEX") }}
              </strong>
              <img
                src="@/assets/img/blue-circle.svg"
                class="info pointer-on-hover"
                v-c-tooltip="{
                  html: true,
                  content: getSettlementTooltipContent,
                  active: false,
                  placement: 'bottom',
                }"
              >
            </td>
            <td class="category">
              <fieldset id="settlement-group">
                <input
                  type="radio"
                  name="settlement-group"
                  value="email"
                  @change="selectSettlementPreference"
                  :checked="settlementPreference === email"
                >
                <span class="text">{{ $t("SETTINGS.NOTIFICATIONS.YES") }}</span>
              </fieldset>
            </td>
            <td>
              <fieldset id="settlement-group">
                <input
                  value="none"
                  type="radio"
                  name="settlement-group"
                  @change="selectSettlementPreference"
                  :checked="settlementPreference === none"
                >
                <span class="text">{{ $t("SETTINGS.NOTIFICATIONS.NO") }}</span>
              </fieldset>
            </td>
            <td
              v-if="isEmailInputVisible"
              class="email-column"
            >
              <strong>Email</strong>
              <input
                type="text"
                v-model="emailRecepients"
              >
            </td>
          </tr>
        </table>
      </CCardBody>
    </CCard>
    <CButton
      color="durianprimary"
      class="button"
      @click="savePreferences"
      :disabled="isSaveButtonDisabled"
    >
      {{ $t("SETTINGS.NOTIFICATIONS.SAVE") }}
    </CButton>
  </div>
</template>

<script>
export default {
  name: "Notifications",
  data() {
    return {
      disbursementPreference: "",
      whatsapp: constant.WHATSAPP,
      email: constant.EMAIL,
      none: constant.TEXT_NONE,
    };
  },

  methods: {
    selectDisbursementPreference(event) {
      this.disbursementPreference = event.target.value;
    },
    setDisbursementPreference(data) {
      if (!data.is_available) {
        return;
      }
      const length = data.types.length;
      for (let i = 0; i < length; i++) {
        if (data.types[i].is_enabled) {
          this.disbursementPreference = data.types[i].type;
          return;
        }
      }
    },
    createDisbursementPreferencePayload() {
      const disbursementPreferenceLength =
        constant.DISBURSEMENT_PREFERENCE_TYPES.length;
      const types = [];
      for (let i = 0; i < disbursementPreferenceLength; i++) {
        if (
          constant.DISBURSEMENT_PREFERENCE_TYPES[i] ===
          this.disbursementPreference
        ) {
          types.push({
            type: constant.DISBURSEMENT_PREFERENCE_TYPES[i],
            is_enabled: true,
          });
        } else {
          types.push({
            type: constant.DISBURSEMENT_PREFERENCE_TYPES[i],
            is_enabled: false,
          });
        }
      }
      return { is_available: true, types: types };
    },
    createRequestPayload() {
      const disbursementPayload = this.createDisbursementPreferencePayload();

      return {
        disbursement: disbursementPayload,
      };
    },
    async savePreferences() {
       ....
    },
    async getPreferences() {
       ....
    },
  },

  computed: {
    getDisbursementTooltipContent() {
      return `${this.$t("SETTINGS.NOTIFICATIONS.DISBURSEMENT")}`;
    },
    getSettlementTooltipContent() {
      return `${this.$t("SETTINGS.NOTIFICATIONS.SETTLEMENT")}`;
    },
    isEmailInputVisible() {
      return this.settlementPreference === this.email;
    },
    getEmailRecipients() {
      let recipientsString = "";
      const length = this.settlementEmailReceipients.length;
      for (let i = 0; i < length; i++) {
        recipientsString += this.settlementEmailReceipients[i] + ";";
      }
      return recipientsString;
    },
    isSaveButtonDisabled() {
      return (
        this.emailRecepients.length === 0 &&
        this.settlementPreference === constant.EMAIL
      );
    },
  },
  mounted() {
    this.getPreferences();
  },
};
</script>

我试图自动将任何一个带有以下代码的检查按钮设置为：

   watch : {
         disbursementPreference:function(val) {
             console.log("watch value has been changed => ",val);
             document.getElementById(val).checked = true;
         },
   },

但

  updated() {
    console.log("value that I am trying to test => ",this.disbursementPreference);
    document.getElementById(this.disbursementPreference).checked = true;
  },

事实是，上面的代码捕获了对支付的更改， ，结果仍然保持不变，因为小部件尚未呈现。

有没有办法解决上述问题？我尝试了窗口。

还有其他方法可以解决这个问题吗？请让我知道谢谢。

PS：出于专有原因，我尚未添加所有模板代码。