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?

Answer 1

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
/>