How do I modify part of the DOM outside of my Vue.js app such as a tag?

Question

I have a Vue.js app where the main template looks like this:

<html>
<head>
  <link id="theme" rel="stylesheet" href="foo.css">
</head>
<body>
  <div id="app"></div>
</body>
</html>

I can easily modify anything within #app as part of my Vue.js code, however later I want to modify the #theme from within a Component where a <select> is used to select which theme to use.

Is this related? https://stackoverflow.com/questions/46730904/user-switchable-custom-themes-with-vue-js — Crescent Fresh, Mar 22 '19 at 03:36
If I'm understanding this correctly.. you can still change the `id` of an `` element the same way you would using vanilla JS.. [from within any component] `document.getElementById("theme").id = "myNewTheme"` — Matt Oestreich, Mar 22 '19 at 03:56

score 4 · Accepted Answer · edited Mar 22 '19 at 04:45

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.

How do I modify part of the DOM outside of my Vue.js app such as a tag?

1 Answers1