Javascript Vue可拖动子组件修改父数据

我的应用程序结构如下所示

App
    Column Component
        Task Component
        Task Component
        Task Component
    Column Component
        Task Component
        Task Component
    Column Component
    Column Component

每一列都有一个围绕任务的

组件。 在应用程序级别，我有一个具有不同列的数据对象，每个列都有它的任务

data: function() {
    return {
        columns: {
            new: [
                {
                    ID: 1,
                    title: 'The thing',
                    description: 'Prepare a proposal for facade'
                },
                {
                    ID: 2,
                    title: 'The thing 2',
                    description: 'Prepare a proposal for facade'
                },
                {
                    ID: 3,
                    title: 'The thing 3',
                    description: 'Prepare a proposal for facade'
                }
            ],
            inProgress: [
                {
                    ID: 4,
                    title: 'The thing 4',
                    description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
                },
                {
                    ID: 5,
                    title: 'The thing 5',
                    description: 'Prepare a proposal for facade Store Opening Process (DEMO)'
                }
            ],
            done: [],
            onHold: []
        }
    }
}

我在列上循环，并将对象绑定到组件：

<kool-column
    v-for="column"
    v-bind="colum"
></kool-column>

<script id="kool-column-template" type="text/x-template">
    <div>
        <div>
            {{ column.name }} ({{ column.cards.length }})
        </div>
        <div>
            <draggable v-model="cards" group="columnkool">
                <div v-for="card in cards" :key="card.ID">
                    <kool-card v-bind="card"></kool-card>
                </div>
            </draggable>
        </div>
    </div>
</script>

<script>
    $(document).ready(function() {
        Vue.component('koolColumn', {
            template: '#kool-column-template',
            props: {
                ID: {
                    type: Number,
                    required: true
                },
                name: {
                    type: String,
                    required: true
                },
                cards: {
                    type: Array,
                    default: function() { return []; }
                }
            }
        });
    });
</script>

有道理，我一直在阅读和调查，在Vue中，您希望使用道具将数据向下传递到组件中，但要修改此数据，您需要向父级发送一个事件，并让父级修改它

好的，但是我使用的库会修改我传递给它的列表。那么，我该怎么办？ 我想到的解决方案：

安装柱组件时，将道具卡复制到组件的数据中，将其用于列表和修改，每次更改时，将新列表发送给父级。我认为这没有多大意义，我将有两个信息源（应用程序对象中的卡和我列组件对象中的卡），并且有可能它们不对齐，毕竟，我正在分别更新列表

删除项目时，使用库来实际“不允许”删除（您可以使用库事件并返回false，这样就不会实际更改列表）。捕获事件，向父级发送所拖动项目的信息，以及用户是否试图删除该项目并相应地更改数据。基本上，我使用拖放库只是为了知道用户试图把东西放在哪里，并实际手动更改数据。这似乎也很奇怪，代码真的很难理解，并且在删除项目时会出现闪烁（因为它会回到原始位置，然后回到您想要的位置）

另一个糟糕的解决方案是传递给列组件，而不是单独传递v绑定和每个属性，而是传递给整个对象。因此，我不再使用

v-bind=“column”

而是使用

：column=“column”

，这实际上会使Vue警告消失，并保持双重数据绑定。问题是，我在做反模式，没有警告，但仍然。。。（顺便说一句，这个方法来自这个例子：）

---

我应该继续采用#2#的方法吗？虽然很难看，但至少不是反模式，也不是信息翻倍。或者，当我无法“控制”正在更新的列表时，是否有其他方法保持双重数据绑定？或者可能只是应用程序的不同架构/结构？

Vue Dragable有两种方法处理提供的数据：

使用

v-model=“array”

，这是不可变的-如果项目顺序发生更改，它将创建一个新副本

使用

：list=“array”

，这将使用相同的引用并使用splice更新阵列

---

在您的情况下，使用

：list=“array”

，您应该会很好。

嗨，Joseph，遇到了与您完全相同的问题：我希望在子表组件中包含vue dragable，其中我将“行”作为道具传递。我在道具的可变性方面也面临同样的问题。你找到问题的答案了吗？你最后做了什么？看起来互联网并没有提供很多关于如何处理vuue Dragable inside child componentHi@SebT的好方法的线索，我正在做我在帖子中写的解决方案3。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "cards"