When attempting to reference from a variable, you may encounter an error stating that setAttribute

In my VueJS project, I am facing an issue with dynamically adding the width attribute to an inline SVG code stored in a variable called icon. Despite having the correct SVG icon code in the variable, the setAttribute method is not working as expected and throwing errors. I'm unsure of what I might be overlooking.

Here's a snippet from the Vue template where I intend to display the inline SVG code:

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

This is how it looks inside the single Vue component:

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);
    }
  }
};

I have set up a demonstration project on CodeSandbox for you to reproduce the issue. Your assistance would be greatly appreciated.

javascriptvue.jssvg

Answer №1

To modify the value of this.icon dynamically, you can update the string before returning it in your computed method. Here is an example of how your computed method could be structured:

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

Don't forget to change 

<code v-text="appendDimension"></code>
to 
<code v-html="appendDimension"></code>
because you want to render the HTML and not just display the string itself. Just a friendly suggestion 😉

Answer №2

Within this particular function, the variable this.icon holds the initial value set in the .data() method as a string, not an actual <svg> element.

Furthermore, using .setAttribute() as the return value within a return statement is illogical since it always results in undefined.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a unique header to an Ajax CORS request can be achieved by following a few

Searching for a way to include a custom header for Ajax CORS request? Look no further! My server is PHP Lumen and the proxy server is Nginx. The file bootstrap/app.php holds my project configuration details I've come across articles like this and th ...

javascriptphpjqueryajaxcors

Restrict a class to contain only functions that have a defined signature

Within my application, I have various classes dedicated to generating XML strings. Each of these classes contains specific methods that take input arguments and produce a string output. In order to enforce this structure and prevent the addition of methods ...

javascripttypescript

Adding a hash to asset paths in NextJS static builds

After running next build && next export, I receive a directory named out, which is great. When examining the source code, such as in the index.html file, it requests assets from <link rel="preload" href="/_next/static/css/styles.aa216922.chunk. ...

javascriptnext.js

Styling the button in jQuery to switch between disabled and enabled

I'm currently working on creating a disabled/enable button style using jQuery. You can check out my demonstration page on Codepen for reference. In the demo, you'll notice a blue submit button. When you input text into the field, the button bec ...

javascriptjquerycss

Conditional Matching with Javascript Regular Expressions

My strings are formatted like this: #WTK-56491650H #=> want to capture '56491650H' #M123456 #=> want to capture 'M123456' I am trying to extract everything after the # character, unless there is a dash. In that case, I onl ...

javascriptregex

Troubleshooting ASP.NET Ajax Error Code 0

Starting from scratch with asp.net and hoping to incorporate infinite scrolling using jQuery Ajax and ASP.NET MVC. Here's the progress so far: <div id="container"></div> <div id="progress" style="display:none"> <h4>Loading ...

javascriptjqueryasp.netajaxasp.net-mvc

Having trouble transmitting data from the View to the Controller

Need help with this issue. I'm having trouble passing my data to the controller. Below is my ajax code. <script type="text/javascript"> $(document).on("click", "#login_button", function () { var userName = document.getElementById(" ...

javascriptc#jqueryajaxasp.net-mvc

Adding an overlay to a material UI table row: Step by step guide

My code is rendering a row in the following format: `<TableRow key={row.name} > <TableCell>{row.empId}</TableCell> <TableCell>{row.userId}</TableCell> <TableCell>{row.name}</TableCell> <TableCell>{r ...

javascriptcssreactjshtml-tablematerial-ui

What is the method to assign multiple values to ng-disabled in AngularJS?

Is there a way to assign multiple values for ng-disabled in AngularJS? The issue I'm facing is demonstrated in the following JS Fiddle: http://jsfiddle.net/FJf4v/10/ <div ng-app> <div ng-controller="myCnt"> <h3>A ->> ...

javascripthtmlangularjsangularjs-directive

Transferring environment variables from Azure pipelines to a Vue application using Quasar 2.6 with a readonlyrootfilesystem configuration

I am currently working on a Vue App that is powered by Quasar 2.6. I recently made a configuration change in my AWS task definition to set readonlyrootfilesystem to true. However, I encountered a problem when trying to write environment variables to a file ...

vue.jsvuejs2environment-variablesazure-pipelinesquasar-framework

Manipulating JSON with ng-model in AngularJS

Let's say I have a simple JSON similar to this: { "Object 0": {} } I am trying to display it as a tree structure. This is the approach I am taking: <span>{{key}}</span> // Object 0 <span>{{value}}</span> // {} <ul> ...

javascriptangularjsjson

How does the use of nodejs, a server-side scripting language, tie into ReactJs or other front-end languages?

Can Node, being a server-side scripting language, be effectively utilized in the development of front-end applications such as npx create-react-app or npx create-nuxt-app? ...

node.jsreactjsangularvue.jsnpm

Building a listview using Angular, MySQL, and Node.js

As a newcomer to Angular, I've been navigating my way through the learning process with some success but also encountering challenges. Although I've managed to resolve certain issues within the application, such as successfully inserting data int ...

javascriptmysqlnode.jsangularjs

Is there a way to access and troubleshoot the complete source code within .vue files?

I've been struggling for hours trying to understand why I'm unable to view the full source of my .vue files in the Chrome debugger. When I click on webpack://, I can see the files listed there like they are in my project tree, but when I try to o ...

javascripttypescriptvue.jswebpack

Vue is removing a DOM node during the created lifecycle hook to set up a component

I am currently working on understanding the issue with this example that is not behaving as expected. My goal is to initialize my ContentView using the server-side rendered HTML in the DOM. I plan to check if init__main-content exists and then initialize t ...

javascriptvue.js

Is there a way to execute a method from a child component in VueJS?

I'm trying to figure out how to make a parent component trigger a method in a child component when a button is clicked. Here's an example of what I have: Parent <template> <child-component></child-component> <button @clic ...

vue.js

I am uncertain about whether it would be better to utilize URL path parameters or query parameters for filtering on the back-end of the application

Suppose I am trying to retrieve all car models from a specific brand. This can be achieved by utilizing URL path parameters or query parameters as shown below: router.get('/modelsByBrand', modelController.getModelsByBrand); To make the GET reque ...

javascriptnode.jsexpress

How can I position 7 images absolutely within a specific div?

I've been working on a website where users can have their avatars displayed using a JS function that loads 7 different images onto the page. These images correspond to different elements such as skin base, hair, eyes, mouth, shirt, shoes, and pants, a ...

javascripthtmlcssimage

Trouble displaying REACT.jsx in browser

I'm currently learning React and struggling to get it running smoothly. HTML function Person(){ return ( <div class="person"> <h1>Max</h1> <p>Your Age: 28</p> </div> ); } ...

javascripthtmlreactjs

Display modal popup only once the dropdown has been validated, with the validation focusing on criteria other than the dropdown itself

Looking for a way to validate dropdown values. Popup should only show if the dropdown values are selected; otherwise, the popup should remain hidden. Below is the code snippet: <div class="main-search-input-item location"> ...

javascriptjquery