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

【问题标题】：Pass the many to many relation value to vue file将多对多关系值传递给 vue 文件
【发布时间】：2020-09-23 03:36:19
【问题描述】：

我有一张表 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'));
}

在我的组件中，我像这样传递了 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

还有其他......

【问题讨论】：

标签： php laravel vue.js vue-component

【解决方案1】：

您应该像这样将对象和数组作为编码 json 传递：

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

【讨论】：