如何在我的 Vue.js 应用程序之外修改部分 DOM，例如 <link> 标记？

【问题标题】：How do I modify part of the DOM outside of my Vue.js app such as a <link> tag?如何在我的 Vue.js 应用程序之外修改部分 DOM，例如 <link> 标记？
【发布时间】：2019-08-13 00:10:05
【问题描述】：

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

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

作为我的 Vue.js 代码的一部分，我可以轻松地修改 #app 中的任何内容，但是稍后我想从一个组件中修改 #theme，其中 <select> 用于选择要使用的主题。

【问题讨论】：

这有关系吗？ stackoverflow.com/questions/46730904/…
如果我理解正确的话..您仍然可以像使用 vanilla JS 一样更改<link> 元素的id .. [从任何组件中] document.getElementById("theme").id = "myNewTheme"

标签： javascript vue.js vue-component

【解决方案1】：

使用材料设计颜色 css 制作了一个 JSFiddle：https://jsfiddle.net/rk5ytqs3/2/

在数据中分配主题名称，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>

当用户通过方法选择更改主题时

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

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

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

【讨论】：