javascript - 从变量引用时 setAttribute 不是函数

Question

我正在开发一个 VueJS 项目，其中有一个 icon包含内联 SVG 代码的变量。我想添加width属性为<svg></svg>元素动态地从计算属性。但是，即使我在变量中具有 SVG 图标的正确代码，setAttribute不工作并抛出错误。我不确定我在这里缺少什么。

以下内容来自 Vue 模板，我想在其中显示内联 SVG 代码:

<code v-text="appendDimension"></code>

我在 Vue 单个组件中有以下内容:

export default {
  name: "App",
  data() {
    return {
      dimension: 50,
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 10 0 110-20 10 10 0 010 20zm0-2a8 8 0 100-16 8 8 0 000 16z"/></svg>'
    }
  },
  computed: {
    appendDimension() {
      return this.icon.setAttribute("width", this.dimension);
    }
  }
};

我在CodeSandbox上创建了一个测试项目您可以用它来重现它。任何帮助将不胜感激。

Answer 1

由于 this.icon 的值是一个字符串，您可以在返回之前动态更改该字符串。您的计算方法可能如下所示:

computed: {
    appendDimension() {   
      return this.icon.replace("<svg ", "<svg width='" + this.dimension + "' ");
    }
  }

您还应该更改您的 <code v-text="appendDimension"></code>至<code v-html="appendDimension"></code>因为你想要渲染 html 而不是字符串本身。但这是我的猜测;)