[Vuejs]-How do I modify part of the DOM outside of my Vue.js app such as a <link> tag?

by

4👍

✅

Made a JSFiddle using material design colors css : https://jsfiddle.net/rk5ytqs3/2/

in data assign theme name, css url 

    themes:[
    {color:'blue', url:'https://code.getmdl.io/1.3.0/material.light_blue-light_green.min.css'}, 
    {color:'orange', url:'https://code.getmdl.io/1.3.0/material.orange-yellow.min.css'}, 
  {color:'purple', url:'https://code.getmdl.io/1.3.0/material.deep_purple-red.min.css'}, 
  {color:'pink', url:'https://code.getmdl.io/1.3.0/material.pink-indigo.min.css'}, 
    ]

use v-for and assign them in to select 

<select name="theme" @change="changetheme">
    <option v-for="(theme, index) in themes" :value="index">{{theme.color}}</option>
   </select>

When user selected change theme via method 

changetheme(event) {
  let val = event.target.value

  document.querySelector('#theme').href = this.themes[val].url
}

In general, modifying the DOM outside of your app is considered a side effect. As such, this code should be part of your higher-order components.

👤dagalti

Leave a comment