How can I make condition in v-bind in the Vue?

Question

My component vue like this :

<template>
    ...
        <file-pond v-if="this.$route.params.id"
            label-idle='Drag and drop files here'
            v-bind:allow-multiple="true"
            v-bind:required="true"
            v-bind:files="dataFiles"
        />
        <file-pond v-else
            label-idle='Drag and drop files here'
            v-bind:allow-multiple="true"
            v-bind:required="true"
            accepted-file-types='application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, .xlsx'
        />
    ...
</template>

I use condition id to differentiate between add form and edit form

So, I want to make 1 filepond tag. So it looks simpler

I try like this :

<file-pond
    label-idle='Drag and drop files here'
    v-bind:allow-multiple="true"
    v-bind:required="true"
    v-bind:files="[this.$route.params.id ? dataFiles : '']"
    v-bind:accepted-file-types="[this.$route.params.id ? '' : 'application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, .xlsx']"
/>

But this code is not works. There exist error : Uncaught TypeError: url.split is not a function

How can I solve this error?

in a computed prop define attributes you need in an object, i.e pondOptions then pass that `` its ugly to do v-if/v-else on the same thing just to change a param — Lawrence Cherone, Sep 17 '22 at 18:00

Nikola Pavicevic · Accepted Answer · 2022-09-18T08:38:57.150

You can create computed property:

computed: {
  options() {
    return this.$route.params.id ? 
      {files: this.dataFiles} :  
      {files: '', 'accepted-file-types': 'application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, .xlsx'}
  }
}

and bind it

<file-pond
  label-idle='Drag and drop files here'
  v-bind:allow-multiple="true"
  v-bind:required="true"
  v-bind=options
/>

How can I make condition in v-bind in the Vue?

1 Answers1