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

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?

CodePudding user response：

Try the condition $route.params.id && yourProperty :

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

CodePudding user response：

You can create computed property:

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

and bind options

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