Vue使用v-bind:items为空报错，如何兼容新建与编辑两种场景

你遇到的报错是因为v-bind指令不允许绑定空表达式，你当前的写法在新增场景下!empty($items)判定不成立时，会给:items绑定空字符串，相当于:items=""，Vue解析时找不到有效的JS表达式，同时空字符串也和组件预期的items数组类型不匹配，两个问题共同触发了报错。

你可以从以下3种方案里选适合你场景的使用：

• 方案1：后端输出时直接给默认空数组
  把原来的三元判断返回值从空字符串改成空数组的JSON格式即可，保证不管新增还是编辑场景，绑定的都是合法数组：

  <form :languages='{{ json_encode($languages) }}'
        :items='{{ !empty($items) ? $items : "[]" }}'>
  </form>
  

• 方案2：组件内部加props默认值（更稳妥）
  直接在组件的props定义里给items设置默认空数组，就算外部传值不符合预期或者没传，组件也能正常运行：

  // 组件内部的props定义
  export default {
    props: {
      items: {
        type: Array,
        // 数组/对象类型的默认值要通过工厂函数返回
        default: () => []
      },
      languages: {
        type: Array,
        required: true
      }
    }
  }
  

  配合这个方案的话，后端模板里可以直接简化成可选绑定，不存在items就不传递该属性：

  <form 
    :languages='{{ json_encode($languages) }}'
    v-bind="!empty($items) ? { items: $items } : {}"
  >
  </form>
  

• 方案3：新增场景下显式传null/undefined
  如果你的业务逻辑里需要区分「未传递items」和「传递了空数组」两个状态，可以把空值替换成undefined，Vue会自动忽略值为undefined的prop绑定，不会触发报错：

  <form :languages='{{ json_encode($languages) }}'
        :items='{{ !empty($items) ? $items : "undefined" }}'>
  </form>
  

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