javascript - vue js 中组件加载时默认点击按钮

Question

我在 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>

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

我认为创建了正确的位置。有人可以帮忙吗？预先感谢您。

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

Answer 1

单击按钮时应调用一个方法:

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

然后您可以从生命周期 Hook 以编程方式调用该方法，而不是尝试手动触发按钮上的单击:

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>