Question

标题混乱，我不确定如何写它。所以我有一个组件，它接受一个数组的道具。我想要做的是在array.push（）我想要一个函数来触发该数组元素。

所以这是一个警报Toast消息，我希望它能保持3秒钟。所以我在想像

这样的东西

watch: {
    arrayObj: function () {
        let self = this
        setTimeout(function() {
            self.dismiss(this.id)
        }, 3000)
    }
}

但我想我可能会遗漏一些东西。如何获取最新推送对象的引用，以确保dismiss方法调用正确的警报？是否正确地观察这个问题？

Answer 1

我并不完全清楚你想要获得什么样的行为，但在我看来，你需要跟踪最新推送的项目并将其传递给你的组件。该组件将观察latestPushed并采取相应行动。

如果可以重复最新推送的项目，则在推送重复值时不会看到更改。在这种情况下，将事件总线道具传递给组件并在父项推送时发送和事件是有意义的。

new Vue({
  el: '#app',
  data: {
    bus: new Vue(),
    theArray: [1]
  },
  methods: {
    push() {
      const value = Math.floor(Math.random() * 10);
      this.theArray.push(value);
      this.bus.$emit('push', value);
    }
  },
  components: {
    toasterNote: {
      props: ['bus'],
      data() {
        return {
          active: false,
          latestPush: null,
          timer: null
        };
      },
      created() {
        this.bus.$on('push', (newValue) => {
          this.latestPush = newValue;
          this.active = true;
          clearTimeout(this.timer);
          this.timer = setTimeout(() => this.active = false, 3000);
        });
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div>{{theArray}}</div>
  <button @click="push">Push</button>
  <toaster-note inline-template :bus="bus">
    <div v-if="active">
      You pushed {{latestPush}}
    </div>
  </toaster-note>
</div>

vuejs组件阵列推送观察器

1 个答案: