dimanche 8 mars 2020

How to test Vue button

Hi I have input where I type text and after clicking run button text shows in another div with an id output, I,m trying to test that behavior but after Vue.nextTick nothing change can someone help me ??

<template>
  <div>
    <input type="text" v-model="text" id="input" />
    <button @click="run" id="run" ref="run">Run</button>
    <button @click="reset" id="reset" ref="reset">reset</button>
    <div ref="output" id="output"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: ""
    };
  },
  methods: {
    run() {
      let output = document.getElementById("output");
      output.innerHTML = this.text;
    },
    reset() {
      let output = document.getElementById("output");
      this.text = "";
      output.innerHTML = "";
    }
  }
};
</script>

<style>
#output {
  width: 100px;
  background-color: black;
  color: white;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Aucun commentaire:

Enregistrer un commentaire