I'm just wondering if there is a known issue with scoped styles and the v-html directive? I seem to find that either applying the same styling to the parent or removing the scoped key work from styles everything seems to work ok...?
Example component with the issue (this works with the wordpress API if anyone with a Wordpress site want's to test with their setup):
export default {
name: "Posts",
props: {
msg: String
},
data() {
return {
posts: null
};
},
created() {
this.$http.get(this.$store.state.endpoint + "posts").then(response => {
this.posts = response.body;
});
}
};
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
p {
color: #42b983; // v-html in this example spits out numerous
}
*for replicating example, you can replace this.$store.state.endpoint with your Wordpress API endpoint, e.g., http://localhost:8000/wp-json/wp/v2 or similar.