Javascript 如何在Vue.js应用程序之外修改DOM的一部分，例如标记？

我有一个Vue.js应用程序，其中主模板如下所示：

---

作为Vue.js代码的一部分，我可以很容易地修改应用程序中的任何内容，但是稍后我想从一个组件中修改主题，在该组件中使用a来选择要使用的主题。

使用材质设计颜色css制作JSFIDLE:

在数据分配主题名中，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'}, 
    ]

使用v-for并将其分配到以进行选择

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

一般来说，在应用程序之外修改DOM被认为是一种副作用。因此，此代码应该是高阶组件的一部分

---

这有关系吗？如果我理解正确的话。。您仍然可以像使用vanilla JS一样更改元素的id。。[来自任何组件]document.getElementByIdtheme.id=myNewTheme

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

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