VueJS显示和隐藏消息

Question

我创建了一个基本的CLI结构环境。我有一个显示消息/警报的组件，例如：登录失败等…

由于此组件将在整个应用程序中重复使用，因此我想将其导入到根App.vue文件并在那里进行处理。它正在工作…之类的。

它可以很好地显示消息/警报，但是我希望它在设置的秒数后隐藏/消失/蒸发。或者，单击按钮，它会隐藏/消失/蒸发-我在下面的“警报组件”示例中显示了此按钮。经过一段预定义的时间后，我根本无法获得隐藏，并且单击和隐藏有效，但是取消隐藏也会产生问题。我在App.vue文件中使用setTimeout方法在5秒钟后自动隐藏，并且什么也不会发生，我认为该方法在导入Alert模块之前就已触发……我认为。

到目前为止，这是我的代码…似乎是一个简单的任务，但在过去的几个小时中，它一直困扰着我：

应用组件：

<template>
   <div id="app">
         <alert v-if="alert" v-bind:message="alert"></alert>
         <router-view></router-view>
   </div>
</template>

<script>
   import Alert from './components/frontend/alert'
   export default {
      name: 'App',
      data() {
         return {
            alert: ''
         }
      },
      updated: function() {
         if(this.$route.query.alert){
            this.alert = this.$route.query.alert;
            // This was for me to test the click even - PREFER AUTO HIDE AFTER A FEW SECONDS
           // This returns an error on form submit - see error below
            document.querySelector('.alert').style.display = 'block';
         }
      },
      components: {
         'alert': Alert
      }
   }
</script>

这是警报组件：

<template>
   <div class="alert">
      <p class="text-brand m-20">
         <button class="btn btn-small btn-brand" v-on:click="hideAlert()">Close</button>
         {{message}}
      </p>
   </div>
</template>

<script>
   export default {
      name: 'alert',
      props: ['message'],
      data () {
         return {

         }
      },
      methods: {
         hideAlert() {
            // This was for me to test the click even - PREFER AUTO HIDE AFTER A FEW SECONDS
            document.querySelector('.alert').style.display = 'none';
         }
      }
   }
</script>

使用点击隐藏时出错-来自App.vue文件：

[Vue warn]: Error in updated hook: "TypeError: Cannot read property 'style' of null"

found in

---> <App> at src/App.vue
       <Root>

假设从应用根组件隐藏5秒钟后，如何隐藏Alert组件？这将是我的首选方法，否则我该怎么做才能使单击和隐藏工作？

非常感谢！

Answer 1

document.querySelector('.alert').style.display = 'none';

不要这样 您不应该仅在指令和生命周期挂钩之类的规定位置中在方法中操作DOM。在他们之外，Vue希望能够控制DOM。

您可以使用视图模型控制内联样式。您也可以使用进行条件渲染v-if。Vue方法供您操纵模型并让Vue使DOM反映它。

我已经将您的代码改编为下面的可运行代码段。由于您将hideAlert方法放入组件中，因此我将相关联的内容放在了v-if那里。测试是message（道具）是否具有值，因此关闭是让父级清除消息的问题。这与处理的标准的通信功能的.sync改性剂。

关闭按钮将调用该hideAlert方法，同时我还放置了一个观察程序，以便在每次设置新消息时都会等待5秒钟并调用hideAlert。

Alert组件是独立的；例如，其道具如何获取其值，父级是否从路由器组件获取其值都无关紧要，只有它是否具有值才重要。

document.querySelector('.alert').style.display = 'none';

const Alert = {
  template: '#alert-template',
  props: ['message'],
  methods: {
    hideAlert() {
      // Tell the parent to clear the message
      this.$emit('update:message', '');
    }
  },
  watch: {
    message(newValue) {
      // Close after 5 seconds
      if (newValue) {
        setTimeout(this.hideAlert, 5000);
      }
    }
  }
};

new Vue({
  el: '#app',
  data() {
    return {
      alert: ''
    }
  },
  components: {
    'alert': Alert
  },
  mounted() {
    // If alert has a value, it will display. If not, not.
    setTimeout(() => {
      this.alert = 'Now you have a message';
    }, 500);
  }
});