Problem with printing in vue.js and using v-model.

[Atmtech]

Is it by design not to print the value (input, textarea, any) of a v-model ? Thank you :)

The test code.

<template>
  <div>
    <button
      type="submit"
      class="btn btn-primary btn-block mb-2"
      v-on:click="print"
    >
      print
    </button>

    <div id="printDiv">
      <input
        class="form-control"
        v-model="Test"
        style="background-color:gray;color:white"
      />
      <br />
      <input
        class="form-control"
        value="Working"
        style="background-color:gray;color:white"
      />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data: function() {
    return {
      Test: ""
    };
  },
  methods: {
    print: function() {
      this.$htmlToPaper("printDiv");
    }
  },
  mounted() {
    this.Test = "Boo !";
  }
};
</script>

[jofftiquez]

Hello, I am not entirely sure, however, what this plugin do is it takes the whole element based on the id that you provide to the this.$htmlToPaper("printDiv"). In this case, the div that you are seeing in the print page is no longer a vuejs page, just a plain html page. That's why v-model will not work.

Will be closing for now, kindly create a new issue if you have more question. Also, please dont forget to add the label "Question". Thank you.

[varna9000]

@jofftiquez Hi, I'm sorry to open this again, but how do you go around this problem? How can I print the value of an 'input'? It's always empty because v-model doesn't generate html "value" attribute.