Question

我有一个表discounts与items表有很多关系我为此使用了Vue.js和Laravel

我的Vue文件中有

data: function() {
     return {
          books:[],
          options:[],
     };
},
methods:{
     getBooks: function(query) {
        axios.post('/admin/search-books',{
            keyword: query,
        }).then((response) => {
           console.log(response.data);
           this.options = response.data;
        }).catch((error) => {
           console.log(error.data);
        })
     },
}

在我的表单中，我有这个

<discount-form :action="somthing">
   <form class="form-horizontal form-create" method="post" @submit.prevent="onSubmit" 
       :action="this.action" novalidate>
     <multiselect v-model="books" placeholder="Name / ISBN of Books" label="name" track- 
     by="id" :options="options" :multiple="true" @search-change="getBooks" 
     :show-labels="false" :close-on-select="false" name="books[]">. 
     </multiselect>
   </form>
</discount-form>

我完美地存放了附件，没有任何问题。但是当我进入编辑表单

我像这样从控制器传递了值

public function edit(Discount $discount) {
    $books = $discount->items
    return view('admin.edit,compact('discount','item'));
}

在我的组件中，我通过了这样的道具

<discount-form :data="{{$discount->toJson()}}" :items="{{ $books->toJson() }}">

我已经完成了js文件

props:['items'],
// and added mounted() and done this in that 
mounted() {
    this.items = this.books
}

但这无法正常工作，并给我类似这样的错误

 Error in getter for watcher "filteredOptions": "TypeError: Cannot read property 'concat' of undefined"

TypeError: Cannot read property 'concat' of undefined

和其他....

Answer 1

您应该将对象和数组传递为对json进行编码，例如：

<discount-form :data="@json($discount)" :items="@json($books)">

将多对多关系值传递给vue文件

1 个答案: