Возможно ли сделать реквизит условным в Vue, например, prop2 зависит от значения prop1?

Question

У меня есть сценарий использования, когда мне нужно передать конкретное сообщение об ошибке пользовательскому компоненту.Если и только если определенная опора установлена ​​на true.Но я сомневаюсь, что this.required доступно в подпорках, потому что оно не будет инициализировано.

//custom component
props: {
  required: {
    type: Boolean,
    default: false
  },
  requiredErrorMsg: {
    type: String,
    default: '',
    required: this.required
  }
}

Vue (или eslint?) Должен затем выдать предупреждение или ошибку, если пропадает в зависимости от того,required было установлено в true или нет.

<Custom :required="true" /> //missing prop error
<Custom :required="true" required-error-msg="this is an error"/> //no issues

---

в настоящее время используется:
nuxt v2.3.4
eslint v5.0.1

Answer 1

Vue сама по себе никогда не «выбрасывает» ошибку, когда отсутствует необходимая пропа. Vue выдаст только [Vue warn]. Это на самом деле не упоминается в документации . Таким образом, чтобы доказать это, если вы запустите приведенный ниже фрагмент с отсутствующим необходимым пропом, вы увидите, что он все еще может отрендерить:

Vue.component('custom-component', {
  template: `
    <div>
      required:<br>
      {{ required }}
      <br><br>
      requiredErrorMessage:<br>
      {{ requiredErrorMessage }}
    </div>
  `,
  props: {
    required: {
      type: Boolean,
      default: false
    },
    requiredErrorMessage: {
      type: String,
      default: '',
      required: true  // <-- Explicitly set to true
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <custom-component
    :required="true"
  />
</div>

Если вы хотите, чтобы он действительно выбрасывал (останавливал выполнение), вам нужно явно сделать его равным throw, используя свойство computed. Если вы запустите приведенный ниже фрагмент с явным throw в вычисляемом свойстве used , вы должны увидеть, что оно вообще не будет отображаться:

Vue.component('custom-component', {
  template: `
    <div>
      required:<br>
      {{ required }}
      <br><br>
      requiredErrorMessage:<br>
      {{ errorMessage }}
    </div>
  `,
  props: {
    required: {
      type: Boolean,
      default: false
    },
    requiredErrorMessage: {
      type: String,
      default: '',
    }
  },
  computed: {
    errorMessage(){
      if (this.required === true && !this.requiredErrorMessage)
        // Explicitly call `throw` when required conditions are not met
        throw new Error('Missing prop error.');
        
      return this.requiredErrorMessage;
    }
  }
});

new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <custom-component
    :required="true"
  />
</div>