Laravel по-русски

rewuxiin

Сообщений: 2

Vue nested draggable не связывается с v-model в blade

Всем привет.
Поломалась голова совсем, может кто-то ткнет в очевидное.

В laravel создал компонент

<template>
    <div class="row">
        <div class="col-7">
            <h4>Options</h4>

            <draggable v-model="list" tag="ul"  class="list-group" handle=".handle">
                <li class="list-group-item"
                    v-for="(element, idx) in list"
                    :key="element.id"
                >
                    <i class="fa fa-align-justify handle"></i>

                    <input type="text" class="form-control" v-model="element.value" />

                    <i class="fa fa-times close" @click="removeAt(idx)"></i>
                </li>
            </draggable>
        </div>

        <div class="col-1">
            <div class="btn btn-secondary button" @click="add">Add</div>
        </div>

    </div>
</template>

<script>

    import draggable from "vuedraggable";
    export default {
        name: "filter-options",
        display: "filter-options",
        instruction: "Drag using the handle icon",

        props: ['filterOptions'],
        components: {
            draggable
        },
        data() {
            return {
                list: this.filterOptions,
                dragging: true,
            };
        },
        computed: {
            draggingInfo() {
                return this.dragging ? "under drag" : "";
            },
        },
        methods: {
            removeAt(idx) {
                this.list.splice(idx, 1);                
            },
            add: function() {
                this.list.push({ id: Math.floor(Math.random() * 100000), value: "" });
            }
        },
    };
</script>

в blade использую его вот так

<filter-options v-model="form.filter_options" :filter-options="{{$filter_options}}"></filter-options>

и в form.filter_options - никаких изменений((

Изменено rewuxiin (20.10.2019 22:38:28)

rewuxiin

Сообщений: 2

Re: Vue nested draggable не связывается с v-model в blade

сделал так
в компоненте зарегистрировал разово в Props данные

 export default {
        name: "filter-options",
        display: "filter-options",
        instruction: "Drag using the handle icon",

        props: {
            list: {
                type: Array
            }
        },
        components: {
            draggable
        },
        data() {
            return {
               // list: this.list,
                dragging: true,
            };
        },

в шаблоне передал данные в props из модели

<filter-options v-model="form.filter_options" :list="form.filter_options"></filter-options>