v文本字段无法设置默认值

Question

出于某种奇怪的原因，有一种竞态条件似乎阻止我将默认值加载到我的文本字段（而不是文本区域）中。默认值为从il18n和自定义过滤器获取的字符串。自定义过滤器不会显示文本字段的第一次加载。

<template>
  <div v-if="trialId">
  <v-dialog width="800" v-model="showFeedbackDialog">
    <v-card>
      <v-toolbar>
        <v-toolbar-title class="primary--text">
          {{$t('trials.feedback', {id: trialId})}}
        </v-toolbar-title>
      </v-toolbar>
      <v-card-text class="pb-0">
      <v-flex shrink px-3>
        <v-text-field :label="$t('trials.trial_feedback_subject_label')" required v-model="subject">
        </v-text-field>
      </v-flex>
        <v-flex px-3>
          <v-textarea v-model="feedback" :label="$t('trials.trial_feedback_form_body')">
          </v-textarea>
        </v-flex>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions class="pl-3">
        <v-spacer></v-spacer>
        <v-btn @click="submitFrom" flat color="primary" :disabled="!canSubmit">Send</v-btn>
        <v-btn @click="resetModal" flat color="primary">cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <v-tooltip bottom>
  <v-btn  class="ma-0" color="success" v-show="showTrialFeedback" @click="showFeedbackDialog = true" target="_top" slot="activator" round>
    {{$t('trials.trial_feedback')}}
  </v-btn>
  <span>{{$t('trials.tooltip_trial_feedback')}}</span>
  </v-tooltip>
  </div>
</template>

<script>
    export default {
      name: "TrialFeedback",

      props: {
        trial: {
          type: Object,
          default: function () {
            return null
          }
        }
      },
      created(){
        this.subject = this.$t('trials.trial_feedback_form_subject', {id: this.trialId})
      },
      data(){
        return {
          showFeedbackDialog: false,
          subject: null,
          feedback: null,
        }
      },
      methods: {
        async submitFrom(){
          const payload = {
            trial_sys_id: this.trial.sponsor_id,
            nct_id: this.trial.nct_id,
            subject: this.subject,
            feedback: this.feedback,
            to: 'smarc@emergingmed.com'//this.$config.get().feedbackMailTo
          }
          await this.$api.trials.sendFeedback(payload)
          this.resetModal()
        },
        resetModal(){
          this.subject = null
          this.feedback = null
          this.showFeedbackDialog = false
        }
      },
      computed: {
        showTrialFeedback() {
          return this.$config.get().displayTrialFeedback;
        },
        trialId(){
          if (this.trial) return this.$options.filters.trialId(this.trial)
          return ''
        },
        canSubmit(){
          return !!this.subject && !!this.feedback
        }
      },
      watch: {
        showFeedbackDialog(val){
          if (!val){
            this.resetModal()
          }
        }
      }
    }
</script>

所有数据都存在，但是我仍然无法获得表格在第一个显示器上显示正确的默认值（打开模态时）。 我尝试过，将经过过滤的ID作为prop传递，发生了同样的问题，尝试了一些生命周期挂钩来初始化属性。

Answer 1

我唯一能够做到这一点的方法是使用带有getter和setter的计算属性，这很违反直觉：

 tempSubject: null,
 subject: {
          get(){
            if (this.tempSubject) return this.tempSubject
            return this.$t('trials.trial_feedback_subject', {id: this.trialId})
          },
          set(newValue){
            this.tempSubject = newValue
          }
        },
        canSubmit(){
          return !!this.feedback
        }