javascript - 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>

如何让 Alert 组件在 App 根组件中隐藏起来，比方说 5 秒？这是我的首选方法，否则我该怎么做才能让点击和隐藏正常工作？

非常感谢!

Answer 1

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

不要这样做。你不应该在方法中操作 DOM，只能在指令和生命周期 Hook 等规定的地方操作。在它们之外，Vue 期望控制 DOM。

你可以控制inline styles使用你的 View 模型。你也可以做 conditional rendering with v-if . Vue 方法是让您操纵模型并让 Vue 使 DOM 反射(reflect)它。

我已将您的代码改编为下面的可运行代码段。由于您将 hideAlert 方法放在组件中，因此我将关联的 v-if 放在那里。测试是 message(prop)是否有值，所以关闭就是让父级清除消息。这是使用 the .sync modifier 处理的标准通信功能.

关闭按钮调用 hideAlert 方法，我还放置了一个观察器，以便在设置新消息时等待 5 秒并调用 hideAlert。

Alert 组件是独立的；例如，它的 prop 如何获取它的值，父级是否从路由器组件获取它并不重要，重要的只是它是否有值。

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);
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <alert v-bind:message.sync="alert"></alert>
</div>

<template id="alert-template">
   <div v-if="message" 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>