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 v-html="appendDimension">, поскольку вы хотите визуализировать html, а не саму строку. Но это мое предположение;)

Answer 2

Значением this.icon в этой функции является строка , к которой она была инициализирована в методе .data(). Это не фактический элемент <svg>.

Кроме того, использование .setAttribute() в качестве значения оператора return не имеет большого смысла, так как оно всегда возвращает undefined.