How can i send two different variable in one props with v-if in Vue-JS

user_14248729 0
Viewed 98

i'm trying to send diferent datas to my other component. Basically, when my variable firstvalue is not null, i want to send firstvalue.

And it's working, but now i want to send secondvalue if the secondvalue is not null. Basically right now i have this

<props-form
  v-if="firstvalue !== null"
    :point="firstvalue"
    :eventBus="eventBus"
    @cancel="() => cancelFct()"
></props-form>

And i would like to do something like this :

<props-form
  v-if="firstvalue !== null"
    :point="firstvalue"
  v-if="secondvalue !== null"
    :point="secondvalue"
    :eventBus="eventBus"
    @cancel="() => cancelFct()"
></props-form>

But it's not working because i can't "duplicate" props and because i can't put two v-if like this.

How can i do something like this ?

vue.js html javascript
2 Answers
<props-form
  v-if="firstvalue !== null || secondvalue !== null"
    :point="firstvalue || secondvalue"
    :eventBus="eventBus"
    @cancel="() => cancelFct()"
></props-form>
user_3812820

If I understand correctly you would like firstvalue to have higher priority than secondvalue of being passed down to props-form as the point prop. I recommend that you use a computed property for this scenario.

<props-form v-if="point !== null" :point="point" />

computed: {
  point() {
    return this.firstvalue || this.secondvalue
  }
}
user_82381290
Related