Discovering the method to incorporate a data-icon attribute within select options using vue.js

UPDATE

before modification

dataIcon: " @/images/flag-ukraine.svg"

after modification

dataIcon: require("@/assets/svg/flag-ukraine.svg"),

notable change with require()

I am using Materialize CSS select. When I use a URL for dataIcon like "http....", the code works fine. However, when I try to add a local file path, nothing seems to work. How can I specify the correct path for local files?

<div class="input-field col s12">
          <select ref="selectCategory" class="icons">
            <option
              v-for="lang in languages"
              :key="lang.id"
              :value="lang.langI"
              :data-icon="lang.dataIcon"
            >{{lang.lang}}</option>
          </select>
        </div>

this represents the data

data: () => ({
    date: new Date(),
    interval: null,
    dropdown: null,
    languages: [
      {
        lang: "Українська",
        langId: "uk-UA",
        dataIcon:
          " @/images/flag-ukraine.svg"
      },
      {
        lang: "English",
        langId: "en-US",
        dataIcon:
          "https://images.ua.prom.st/1440764527_saharnaya-kartinka-lyubov.jpg"
      }
    ]
  })

Screenshot link

File structure Empty image

javascriptvue.jsmaterialize

Answer №1

It is advisable to store all your static files in the src/assets/ directory. For instance, if you do not plan to use SVG images, you can create a folder for your SVG files and then reference them in your code or HTML template.

UPDATED:

data: () => ({
date: new Date(),
interval: null,
dropdown: null,
languages: [
  {
    lang: "Українська",
    langId: "uk-UA",
    dataIcon: require("@/assets/svg/flag-ukraine.svg"),
  },
  {
    lang: "English",
    langId: "en-US",
    dataIcon:
      "https://images.ua.prom.st/1440764527_saharnaya-kartinka-lyubov.jpg"
  }
]
  })

Your folder structure seems unconventional. According to Vue.js documentation, it is recommended to follow a structure similar to this.

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

Extract the price value from the span element, then multiply it by a certain number before adding it to a div element

On the checkout page of my website, I have the following HTML: <tr class="order-total"> <th>Total</th> <td><strong><span class="woocommerce-Price-amount amount"> <span class="w ...

javascripthtmljquery

What is the best way to trigger a JavaScript function using an HTML button?

I am trying to trigger a JavaScript file from an HTML component by clicking on a button, but nothing happens when I click the button: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> < ...

javascriptajax

Here are the steps to trigger a pop-up window in JavaScript that is filled with data fetched via an AJAX call:

I'm currently working on a java class where I need to insert a link into a table grid. This code is specific to the internal API of our company. /***MyCustomLink.java*********/ customLink.setOnClick( "fetchURL", return false;); addGridItem("cu ...

javascriptajaxjsfpopupwindow

Invoke a function using the output of a different function

There is a function whose name is stored in the value of another function, and I need to invoke this function using the other one. The function I need to call is popup() random() = 'popup()' if ($.cookie('optin-page')) { } I attemp ...

javascriptjqueryhtmlcss

Automatically updating the results section while executing SQL queries in PHP

Here is a JavaScript/Ajax code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready (function () { var updater = se ...

javascriptphpjqueryhtml

Clicking on a specific month results in displaying only one row from the database rather than showing all rows associated with that particular month

I am facing an issue with my calendar feature on the website. The problem is that when I click on a specific month, it should display all the data associated with that particular month. However, the current code does not seem to work as expected. For insta ...

javascriptphphtml

Incorporating PHP generated content into Dart without using Ajax

My current website is built using PHP (Laravel) on the server side and Javascript on the client side. Now, I am interested in replacing the Javascript with Dart. Currently, I inject data into the Javascript on the webpage like this: <script> va ...

javascriptphpajaxdart

Utilize CSS properties to pass as arguments to a JavaScript function

Is there a way for me to make my CSS animation functions more efficient? I have similar functions for different properties like height, width, and left. Can I modify the function below to accept a CSS property argument instead of hardcoding height? Window ...

javascriptcss

Determine total and showcase it as the range slider is adjusted

Seeking to calculate and present the result of three range sliders. The equation I aim to showcase is: KM driven per year * Avg KM/100L / Price of fuel I have managed to display each slider's individual values, but I am uncertain about how to show t ...

javascript

Testing a Jest unit on a function that invokes another function which in turn returns a Promise

I have a function that triggers another function which returns a Promise. Below is the code snippet for reference: export const func1 = ({ contentRef, onShareFile, t, trackOnShareFile, }) => e => { trackOnShareFile() try { func2(conte ...

javascriptreactjsunit-testingjestjs

Defining variables within a jQuery function

Within my initialization function (init), I have defined some variables and an animation that utilizes those variables. The challenge arises when I want to use the same animation/variables in my clickSlide function. http://jsfiddle.net/lollero/4WfZa/ (Un ...

javascriptjqueryfunctionvariables

Integrating javascript code into Vue HTML files

After successfully integrating Firebase into my Vue project, I now face the task of displaying a snippet of blog content. While I am aware that displaying the entire content can be done easily with the following HTML tag, {{blogs[0].content}} I am unsure ...

vue.js

Upon registration, the user's information is successfully stored in the mongoDB database, even if the selected "username" is already in

I am currently working on a web application using the MERN stack. When registering a user with an existing email either through Postman or the front-end form, the user is not added to the database. The same logic is applied to check if the chosen username ...

javascriptreactjsmongodbmongoose

How to send props from a Vue.js component tag in an HTML file

I'm facing an issue with passing props from the HTML to the JavaScript code and then down to a Vue component. Here's a snippet of my index.html file: <div id="js-group-discounts"> <div class="form-group required"> <datepick ...

javascriptvue.jsvuejs2vue-component

Utilizing a Clear Button to Reset Specific Fields in a Form Without Clearing the Entire Form

I am currently working on a multipart form that includes 'Name', 'Email', and 'Phone Number' fields. It's important to note that the phone number field is actually composed of 10 individual single-digit fields. To enhan ...

javascripthtmljqueryforms

Is there a maximum number of window.open() calls that can be made in JavaScript?

Can the use of window.open("URL"); in JavaScript be limited? Upon attempting to open three windows using window.open("URL"), the third window did not open separately. Instead, it refreshed the contents of the first window and displayed the contents of ...

javascript

Angular Validation displays ng-valid when the form is actually invalid

I am currently working on a wedding RSVP form https://i.stack.imgur.com/Ct8Ux.png My objective is to hide the DONE submit button and only display it when the form is considered valid. <form method="POST" action="http://l.bheng.com:8888/wedding" acce ...

javascriptjqueryangularjsformsvalidation

Revamp the HTML page by automatically refreshing labels upon every Get request

My HTML webpage requires real-time updates for one or more labels. To achieve this, I have incorporated CSS and JS animations into the design. Currently, I am utilizing Flask to handle all the calls. I face a challenge where I need to consistently update ...

javascriptpythonhtmlajaxflask

Tips for efficiently passing TypeScript constants to Vue templates without triggering excessive reactivity

I'm curious about the most efficient way to pass a constant value to a template. Currently, I am using the data property in Vue, but I believe that is better suited for state that changes over time as Vue adds event listeners to data properties. The c ...

typescripttemplatesvue.jsconstants

Setting up JW Player with a YouTube Embed URL

Embed link Is it possible to embed a YouTube link in my JW Player without disrupting the design? I have a specific design for the JW Player frame that I need to retain while incorporating the YouTube link. I have searched extensively but haven't foun ...

javascripthtmlyoutubejwplayer