在vue js中加载组件时默认单击按钮答案

【问题标题】：Default click on a button when component loads in vue js在vue js中加载组件时默认单击按钮
【发布时间】：2021-04-27 08:36:57
【问题描述】：

我在template 内的 vue 组件中有一个按钮，如下所示：

  <a href="#" @click="openTab" class="border-red px-8" id="activeSlide" data-target-quote="#yvoefrance">
    <img :src="inactive_logo[0]" class="logo" alt="yvoefrance logo" />
  </a>

我希望在刷新页面后加载组件时默认点击它，我该如何实现？我尝试关注但对我不起作用。

我认为正确的地方是created。任何人都可以帮忙吗？提前谢谢你。

export default {
  name: "component.showcase",
  components: {
    // ...
  },
  data() {
    return {
      // data here....
    };
  },
  created() {
    document.querySelector("#activeSlide").click();
  },
  mounted() {},
  beforeDestroy() {},
  computed: {},
  methods: {
    openTab: function(e) {
      e.preventDefault();
      const target_tab = e.target.parentElement.dataset.targetQuote;

      document.querySelector(target_tab).classList.add("active");
      e.target.src = require(`@/assets/img/testimonials/${target_img}_active.png`);
    }
  }
};

【问题讨论】：

您想提供一些背景信息吗？为什么需要这个？同样通过查看按钮模板，您似乎没有将任何事件侦听器绑定到它 - 您怎么知道它不起作用？
当然，我会更新问题
你有什么错误吗？
是的，我收到此错误[Vue warn]: Error in created hook: "TypeError: Cannot read property 'click' of null"

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

按钮在点击时应该调用一个方法：

<button @click="someMethod">Show Content</button>

然后您可以从生命周期挂钩中以编程方式调用该方法，而不是尝试手动触发按钮点击：

methods: {
  someMethod() {
    console.log('someMethod called');
  }
},
created() {
  this.someMethod();  // Run the button's method when created
}

编辑以匹配您的编辑：

您正在使用 DOM 操作，但应改为操作数据并让 Vue 处理 DOM。下面是一个基本示例，说明如何做你想做的事：

new Vue({
  el: "#app",
  data() {
    return {
      logos: [
        {
          urlInactive: 'https://via.placeholder.com/150/000000/FFFFFF',
          urlActive: 'https://via.placeholder.com/150/FFFFFF/000000',
          isActive: false
        },
        {
          urlInactive: 'https://via.placeholder.com/150/666666/FFFFFF',
          urlActive: 'https://via.placeholder.com/150/999999/000000',
          isActive: false
        }
      ]
    }
  },
  methods: {
    toggleActive(logo) {
      logo.isActive = !logo.isActive;
    }
  },
});

<div id="app">
  <a v-for="logo in logos" @click="toggleActive(logo)">
    <img :src="logo.isActive ? logo.urlActive : logo.urlInactive" />
  </a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

【讨论】：