Vue.js dynamically passing in functions [closed]

Question

I have a jsonArray.js file

const jsonArray = [
  {"click": "clearValue", "alt": "clearValueIcon", 
  "src" : "https://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Actions-edit-clear-icon.png",
  "style": "grid-column:1/2;grid-row: 2/3;"},
  {"click": "negativePositive", "alt": "negativePositiveIcon", 
  "src" : "https://image.flaticon.com/icons/svg/1777/1777560.svg",
  "style":"grid-column:2/3;grid-row: 2/3"},
  {"click": "percentage", "alt": "percentageIcon", 
  "src" : "https://image.flaticon.com/icons/svg/69/69839.svg",
  "style":"grid-column:3/4;grid-row: 2/3;"}
]

In my App.vue file I import it and give the value to imagesData

 beforeMount() {
    this.imagesData = JsonArray;
  }

Then I use a for loop to populate my img tags

<img
          v-for="img in imagesData"
          :key="img.alt"
          @click="getFunction(img.click)"
          :alt="img.alt"
          :src="img.src"
          :style="img.style"
        />

The only way I have been able to get the click to work is with a giant switch statement that evaluates the string and calls the method.

 getFunction: function(fn) {
      switch (fn) {
        case "clearValue":
          this.clearValue();
          break;
        case "negativePositive":
          this.negativePositive();
          break;
}}

I am thinking there is a better way, but cannot think of one.

Answer 1

First off, the file jsonArray.js doesn't contain "JSON". It's a JavaScript source code file containing an JavaScript array literal which in turn contains JavaScript object literals. And since it's not JSON, you could theoretically put functions into the objects:

{
  alt: "clearValueIcon", // Quotes around key are not needed, since it's not JSON
  src : "...", // shortened
  style: "grid-column:1/2;grid-row: 2/3;",
  handler() {
     this.value = ""; // For example
  }
}, 

And with a helping method:

methods: {
  callHandler(handler) {
     handler.call(this);
  }
}

<img
     v-for="img in imagesData"
     :key="img.alt"
     @click="callHandler(img.handler)"
     :alt="img.alt"
     :src="img.src"
     :style="img.style"
/>

---

However I don't really see the point of outsourcing the buttons into a data array like this. Unless you are using the array in some other way in the project, you should just straight up have a list of imgs (or custom "button" components) in your template.

Two more things:

• The styles belong in the style sheet.
• The chosen texts for the alt attributes are bad. They are supposed to be fallback texts that displayed to the user in the case the images can't be displayed to (or seen by) the user. For the shown buttons something like "Clear", "+/-" and "%" would be better choices.

EDIT: One more thing: You shouldn't be using a plain image with a click handler, but for accessability wrap them in a <button> (or <a>) and put the handler on them.