Vuetify动态创建v-icon

Question

我想用javascript动态创建v-icon。这是我的代码：

const icon = document.createElement('v-icon');
icon.innerHTML = 'folder_open';

但是它不起作用。它仅显示文本，而不显示v-icon。 我该怎么办？

Answer 1

v-icon不是有效的html元素。 v-icon组件将转换为具有特定类的html有效i标签。 Vuetify图标使用Google的Material Icons字体库。因此，要动态创建伪v-icon元素，必须创建一个i元素并将material-icons icon分配为类。最后，您已经将图标的名称添加到内部html中。

示例：

const icon = document.createElement('i');
icon.className = "material-icons icon";
icon.innerHTML = "folder_open";
var main = document.getElementById('main');
main.appendChild(icon);

提琴：https://jsfiddle.net/mqyxbg1k/