CODEWITHSUNDEEP
javascriptvue.js
Jason Chen
Jason Chen

Reputation: 2577

Printing component background color on Vuejs?

I am having trouble printing the background on components that have been styled with Vue.js.

My JS Fiddle can be found at: https://jsfiddle.net/9Lwekx4g/

My HTML looks like:

  <div id="bocks" v-bind:style="{backgroundColor: bgcol}">
  </div>

The background style works as intended. The default color is supposed to be red, which is how it looks when you load the page. However, when you print screen on Chrome, the background color is white.

I understand that if I set the background color to !important then it would show up on print screen. However, this becomes an issue if I want to change the color multiple times, such as on the changec function.

Upvotes: 0

Views: 890

Answers (1)

Quentin
Quentin

Reputation: 3289

This is not a [Vue.js] related issue.
You should not force printing of background colors and images in browsers.

However, here is a way to fix it, which I do not recommend.

.foo {
  width: 200px;
  height: 200px;
  background: red;
  -webkit-print-color-adjust: exact;
}
<div class="foo"></div>

More information about this property (MDN)

Upvotes: 2

Related Questions