Question

我在Vue中使用Laravel框架。我有一个父组件，其中有一个子组件。子组件具有一个复选框列表，无论我勾选哪个复选框，该值都会从存储在data（）中的数组中追加（或删除）。我能够将输入正确地绑定到子组件中的数组，但是当我将该数组发送回父组件时，数据不是新鲜的，即，它使用我勾选的上一个复选框的结果回送了一个数组，而不是当前的一个。我想知道如何在数据绑定和数据发送之间引入某种延迟，以便我可以返回准确的数据。

子组件

override func viewDidLoad() {
    super.viewDidLoad()


    var detailDefaultItem = Descriptor()
    // set/configure needed default values in `Descriptor` class or here below
    // detailDefaultItem.property = someValue
    // ...
    detailItem = detailDefaultItem
    // configureView()
...
}

父组件

<input type="checkbox" :id="color" :value="color" v-model="colors" @click="$emit('color', colors)" />

data() {
    return {
        colors: []
    }
},

输出：当我第一次单击Red时，发射回的数组为空，当我再单击另一种颜色（如Blue）时，则发射回的数组只有“ Red”。

有人可以帮我绑定数据并同时发出相同的数据吗？或者，如果不可能的话，那么引入一个延迟，该延迟可以帮助我先将数据保存到数组中，然后将修改后的数组发送回父组件？ / p>

Answer 1

您可以在Vue中watch数据属性，并在更改数据后执行功能。例如，在子组件中，您可以观看属性colors并发出color事件，仅更改colors；

watch: {
  colors: function(){
    this.$emit('color', this.colors);
  }
}

Answer 2

一个选项是更改发出数据的事件。当前，您在click发生时发出信号。但是，就像您提到的那样，在更新数据之前。要解决您的问题，您只需将事件更改为@change。

无论如何，我建议您使用存储来使组件之间的数据保持同步。例如，您可以查看VueX，或建立自己的商店。 Vue 2.6中新集成的Vue.observable是构建自己的商店的便捷功能，请参见documentation

如何在Vue中同时绑定和发射数据？

2 个答案: