如何在Vue中的v-bind中设置条件

Question

我的组件是这样的：

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

我使用条件id来区分添加表单和编辑表单

所以，我想做一个filepond标签。所以它看起来更简单

我试着这样做：

<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']"
/>

但是这个代码不起作用。存在错误：Uncaught TypeError: url.split is not a function

如何解决此错误？

Answer 1

您可以创建计算属性：

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'}
}
}

并结合

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