Laravel和VUE传递数组来支撑

Question

我有一个多选组件，它看起来像这样：

<multi-select prp-selected="<?php old('organisations_working_at') ?>" 
       prp-name="organisations_working_at" 
       :prp-options="{{ json_encode($organisations) }}" 
       prp-placeholder="Kies organisatie(s)"> 
</multi-select> 

正如你可以看到我从laravel传递old('organisations_working_at')值。

我的组件看起来像这样（我做了周围的其他多选一个包装）：

<template> 
    <div> 
     <input type="hidden" v-for="select in selected" :name="prpName + '[]'" :value="select.id"> 

     <multiselect 
       v-model="selected" 
       :multiple="true" 
       :options="prpOptions" 
       :custom-label="prpCustomLabel" 
       :placeholder="prpPlaceholder" 
       track-by="id" 
       selectLabel="Druk op enter en voeg toe" 
       deselectLabel="Druk op enter en verwijder" 
       open-direction="top" 
       @select="select" 
       @remove="remove"> 
     </multiselect> 
    </div> 
</template> 

<script> 
    import Multiselect from 'vue-multiselect'; 

    export default { 
     components: { Multiselect }, 

     props: { 
      prpSelected: { 
       type: Array, 
       default: this.selected, 
      }, 

      prpOptions: { 
       type: Array, 
       default: this.options, 
      }, 

      prpCustomLabel: { 
       type: Function, 
       default: (label) => label.name, 
      }, 

      prpPlaceholder: { 
       type: String, 
       default: "Kies items" 
      }, 

      prpName: { 
       type: String, 
       default: "items" 
      } 
     }, 

     created() { 
      this.selected = this.prpSelected; 
     }, 

     data() { 
      return { 
       selected: [], 
       options: [] 
      } 
     }, 


     methods: { 
      select(value) { 
       this.$emit('optionAdded', value.id); 
      }, 

      remove(value) { 
       this.$emit('optionRemoved', value.id); 
      } 
     } 
    } 
</script> 

但是当我凝视选定VUE devtools总是（当我收到来自laravel失败的验证响应）：

selected:"" 

当我dd(old('organisations_working_at'));不是空的，并且是一个数组。

我会做什么错？

Answer 1

我相信你需要设置你的道具，如：

prpSelected：{ 类型：数组， 默认：[] }

，并返回数据，因此它是：

选择： this.prpSelected？ this.prpSelected：[]