Vue.js中@click使用三元运算报Unexpected token错误如何解决

Vue模板的内联事件表达式解析器不支持直接将赋值语句作为三元运算的分支返回值，解析到等号位置时会判定为非法语法，因此抛出[plugin:vite:vue] Unexpected token错误。
原有逻辑中三元运算的写法完全冗余：判断数组长度后给布尔变量赋值，不需要写两个赋值分支，这也是触发解析错误的直接诱因。

@click="selectedFiles.push(file.id); selectedFiles.length < 1 ? isCollapse=false: isCollapse=true"

方案1（推荐，可维护性最高）：抽离事件处理方法 #

不要把复杂逻辑堆在模板内，抽成独立方法即可完全规避模板语法限制，也方便后续扩展逻辑：
模板部分绑定：

@click="handleFileSelect(file.id)"

脚本部分对应实现：

// Vue3 组合式API写法
const selectedFiles = ref([])
const isCollapse = ref(false)
const handleFileSelect = (fileId) => {
  selectedFiles.value.push(fileId)
  // 直接把判断结果赋值给布尔变量，省略冗余三元
  isCollapse.value = selectedFiles.value.length >= 1
}

// Vue2/Vue3 选项式API写法
export default {
  data() {
    return {
      selectedFiles: [],
      isCollapse: false
    }
  },
  methods: {
    handleFileSelect(fileId) {
      this.selectedFiles.push(fileId)
      this.isCollapse = this.selectedFiles.length >= 1
    }
  }
}

方案2（极简内联写法）：省略冗余三元，直接赋值判断结果 #

如果逻辑非常简单不想抽方法，直接把长度判断的布尔结果赋值给isCollapse即可，不需要写三元分支：

@click="selectedFiles.push(file.id); isCollapse = selectedFiles.length >= 1"

注意：如果使用Vue3组合式API，模板中访问ref定义的响应式变量不需要手动写.value，解析器会自动解包。

内容的提问来源于stack exchange，提问作者glacto5