Vue.js--CSS doesn't work on v-html element

Question

I was trying to change the <a> tag text's color, but failed, I'm guessing it's because i used v-html to include the <a> text.

Normal css didn't work, but you can change it through javaScript.

 methods: {
    changeVhtmlStyle () {
      let textHrefSoloLearn = document.getElementsByClassName('description')[0].childNodes[0]
      console.log (textHrefSoloLearn)
      textHrefSoloLearn.style.color = '#000000'
    }
  },

  mounted: function() {
    this.changeVhtmlStyle()
  }

I wonder if there's an easy way to do this.

<div class="description" v-html="education.description"></div>



data() {
    return {
      educations: [
        {
          degree: "web front-end developing",
          school: "sololearn",
          schoolWebsite: "https://www.sololearn.com",
          time: "2018/8 ~ present",
          description:
            "<a href='https://www.sololearn.com/'>Sololearn</a> is the largest online community of mobile code learners.<br /><br /> Course finished: <b>HTML</b>, <b>CSS</b>, <b>JS</b>, <b>Jquery</b><br /><br/>Other skills: <b>Vue.js</b>"
        },

        {
          degree: "Educational English",
          school: "Huaiyin normal university",
          schoolWebsite: "http://www.hytc.edu.cn/",
          time: "2011/9 - 2015/6",
          description: ""
        }
      ]
    };
  }

Rakish Frisky · Accepted Answer · 2020-08-07 15:38:39Z

I don't really know how your code looks like but, you can do it like this in your data

  data() {
    return {
      richText:
        '<style scoped>.section-title{color:#ffecd1;font-size:64px;font-weight:700;margin-bottom:32px}.img-header{width:480px;height:auto;object-fit:cover;border-radius:16px;padding-right:16px}.section-motto{color:#ffecd1;font-size:28px;line-height:1.7em;margin-bottom:64px}.text-wrapper{background-color:#932f2d;border-radius:16px;padding:24px}.section-description{color:#ffecd1;font-size:24px;line-height:1.7em}</style><div class="section-title-wrapper"><h2 class="section-title">Ormawa</h2><p class="section-motto">Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam undesapiente quos cum.</p></div><div class="row d-flex align-items-center"><div class="col-4 col-md-4 col-12"><img class="img-header" src="https://via.placeholder.com/400x200" alt="ukm-cover" /></div><div class="col-lg-8 col-md-8 col-12 text-left"><div class="text-wrapper"><p class="section-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit.Eveniet molestiae iste quod blanditiis laborum fugiat odit earumvoluptatem impedit, neque, et accusantium possimus animidoloribus modi in totam eligendi explicabo.</p></div></div></div>'
    };
  }

after that you can just insert it like this:

<template>
 <div>
  <div v-html="richText"></div>
 </div>
</template>

If you confused, for the detail I just add a <style scoped></style> in the rich text. in normal condition my style will look like this:

<style scoped>
  .section-title-wrapper {
    text-align: left;
  }

  .section-title {
    color: #ffecd1;
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 32px;
  }

  .img-header {
    width: 480px;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    padding-right: 16px;
  }

  .section-motto {
    color: #ffecd1;
    font-size: 28px;
    line-height: 1.7em;
    margin-bottom: 64px;
  }

  .text-wrapper {
    background-color: rgb(147, 47, 45);
    border-radius: 16px;
    padding: 24px;
  }

  .section-description {
    color: #ffecd1;
    font-size: 24px;
    line-height: 1.7em;
  }
</style>

and my rich text will looks like this:

  <div class="section-title-wrapper">
    <h2 class="section-title">Ormawa</h2>
    <p class="section-motto">
      Motto UKM Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Aliquid, maiores qui. Debitis vel nulla nihil laudantium veniam unde
      sapiente quos cum.
    </p>
  </div>

  <div class="row d-flex align-items-center">
    <div class="col-4 col-md-4 col-12">
      <img
           class="img-header"
           src="https://via.placeholder.com/400x200"
           alt="ukm-cover"
           />
    </div>
    <div class="col-lg-8 col-md-8 col-12 text-left">
      <div class="text-wrapper">
        <p class="section-description">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit.
          Eveniet molestiae iste quod blanditiis laborum fugiat odit earum
          voluptatem impedit, neque, et accusantium possimus animi
          doloribus modi in totam eligendi explicabo.
        </p>
      </div>
    </div>
  </div>

And yeah, if you input image from local asset it doesn't work as for now i still doesn't find the reason yet, but it is best to use external link.

AzamAbbasi · Accepted Answer · 2019-09-02 09:29:00Z

0

You are assigning color to a local scoped variable txetHrefSoloLearn. you can bind Style and assign color to it like

<div class="description" :style="txetHrefColor" v-html="education.description"></div>

data:{
   textHrefColor:null 
}

methods: {
changeVhtmlStyle:function() {
  this.textHrefColor='#000000';
    }
},

mounted: function() {
this.changeVhtmlStyle()
}

answered Sep 2, 2019 at 9:29

AzamAbbasi

1012 silver badges10 bronze badges

1 Comment

Hai Na Zheng Over a year ago

Yes, i was already using the scoped css. Sorry but i think i didn't make it clear that i wanted to change the color of the text in '<a>' tag in v-html, not the .description div.

barbsan · Accepted Answer · 2019-09-02 12:55:31Z

0

You can write 'internal css' like this

<style scoped>
    .parent /deep/ .child{}
</style>

or

<style scoped>
    .description /deep/ {color:#000}
</style>

edited Sep 2, 2019 at 12:55

barbsan

3,46811 gold badges23 silver badges29 bronze badges

answered Sep 2, 2019 at 9:19

Deepak

556 bronze badges

1 Comment

DarkRob Over a year ago

little more details about your ans is helpful for others.

Collectives™ on Stack Overflow

Vue.js--CSS doesn't work on v-html element

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related