Try this:

```lang-html
&lt;img v-bind:src=&quot;&#39;/media/avatars/&#39; + joke.avatar&quot; /&gt; 
```

Don&#39;t forget single quote around your path string.
Also in your data, check you have a correctly defined image variable.

    joke: {
      avatar: &#39;image.jpg&#39;
    }

A working demo is here: http://jsbin.com/pivecunode/1/edit?html,js,output



How do I check if a component is not present, i.e. that a specific component has not been rendered?

Jest - how to test if a component does not exist?

I&#39;m creating my first Kotlin classes in my Android application. Usually for logging purposes I have a constant with name `TAG`. What I would do in Java is:

    private static final String TAG = MyClass.class.getSimpleName();

I know that in Kotlin classes I can create `TAG` using this way:

    private val TAG = MyClass::class.java.simpleName

This is OK for projects that use Java and Kotlin but what if I start a new project that is only in Kotlin? How can I define there `TAG` constant? Is there more Kotlin way where I don&#39;t have this strange construction `class.java.simpleName`?

What is the best way to define log TAG constant in Kotlin?

I have this in my Vue.js template:

```lang-html
&lt;img src=&quot;/media/avatars/{{joke.avatar}}&quot; alt=&quot;&quot;&gt;
```

It is inside a loop that renders jokes. Other fields are rendered fine, but for the image I get this error in the console:

&gt; - src=&quot;/media/avatars/{{joke.avatar}}&quot;: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand
&gt; instead. For example, instead of &lt;div id=&quot;{{ val }}&quot;&gt;, use &lt;div
&gt; :id=&quot;val&quot;&gt;.

I have also use `v-bind:src=&quot;...`, but I get *invalid expression* error.

How can I fix this?



How can I use &#39;img src&#39; in Vue.js?

I have this in my Vue.js template:
<pre><code class="hljs language-ini">&#x3C;img src="/media/avatars/{{joke.avatar}}" alt="">
</code></pre>
It is inside a loop that renders jokes. Other fields are rendered fine, but for the image I get this error in the console:
> - src="/media/avatars/{{joke.avatar}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand
> instead. For example, instead of <div id="{{ val }}">, use <div> :id="val">.
I have also use <code>v-bind:src="...</code>, but I get invalid expression error.
How can I fix this?
</div></div>

I have been looking into setting up a login for a web app that lets clients view data hosted in S3 and found that AWS Cognito has a hosted web UI [\[link\]][1] that handles most of the authentication flow for me, the issue I am facing is I cannot find out how to integrate the output of the web UI into my app. Most of the existing documentation in Cognito just references how to use the various APIs in creating your own UI which is leaving me with confusing answers to my issue.

Is there any information that has been created with the Cognito hosted UI in mind?

Amazon says that you can integrate authenticated login with Cognito in minutes but I have been looking at this for a few weeks and cant figure it out.


  [1]: http://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-ux.html

Cognito hosted UI

I am using react. I want to add a line break `&lt;br&gt;` between strings

&#39;No results&#39; and  &#39;Please try another search term.&#39;.

 I have tried `&#39;No results.&lt;br&gt;Please try another search term.&#39;`

but it does not work, I need to add the `&lt;br&gt;` in the html.

Any ideas how to solve it?

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

       render() {
           let data = this.props.data;
           let isLoading = this.props.isLoading;
           let isDataEmpty = Object.entries(data).length === 0;
           let movieList = isLoading ? &lt;Loader /&gt; : isDataEmpty ? &#39;No results. Please try another search term.&#39; :
               Object.entries(data).map((movie, index) =&gt; &lt;MovieTile key={index} {...movie[1]} /&gt;);
           return (
               &lt;div className=&#39;movieList&#39;&gt;{movieList}&lt;/div&gt;
           );
       }



&lt;!-- end snippet --&gt;



How to add a &lt;br&gt; tag in reactjs between two strings?

I am taking an input from the user of the card number and wants that the length entered by user must not be less than and more than 12. Here is the declaration of my textfield.

    
    &lt;TextField
        id=&quot;SigninTextfield&quot;
        label=&quot;Aadhaar number&quot;
        id=&quot;Aadhar&quot;
        lineDirection=&quot;center&quot;
        required={true}
        type=&quot;number&quot;
        maxLength={12}
        style={styles.rootstyle}
        erorText=&quot;Please enter only 12 digits number&quot;
    /&gt;

Now I am not understanding whether to use javascript or any event handler for restricting the length.

Put length constraint in a TextField in react js

I am not clearly understanding why the `nomodule` attribute exists in the new browsers that support ES6 modules.

In HTML 5, the `type` attribute is optional and [defaults to `text/javascript`][2]:

&gt; The type attribute gives the language of the script or format of the data. If the attribute is present, its value must be a valid MIME type. The charset parameter must not be specified. The default, which is used if the attribute is absent, is &quot;text/javascript&quot;.


  [1]: http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.1
  [2]: http://dev.w3.org/html5/spec/Overview.html#script


It doesn&#39;t default to `&lt;script type=&quot;module&quot; src=&quot;module.js&quot;&gt;&lt;/script&gt;`. Has this default changed? If not, why would `nomodule` be necessary? Can I just use `&lt;script src=&quot;bundle.js&quot;&gt;&lt;/script&gt;` without `nomodule`?

What’s the purpose of the HTML “nomodule” attribute for script elements if the default is text/javascript?

I&#39;m making an API call using Axios in a React Web app. However, I&#39;m getting this error in Chrome:

&gt; ```none
&gt; XMLHttpRequest cannot load
&gt; https://example.restdb.io/rest/mock-data. No
&gt; &#39;Access-Control-Allow-Origin&#39; header is present on the requested
&gt; resource. Origin &#39;http://localhost:8080&#39; is therefore not allowed
&gt; access. 
&gt;```
```js
{
    axios
      .get(&quot;https://example.restdb.io/rest/mock-data&quot;, {
        headers: {
          &quot;x-apikey&quot;: &quot;API_KEY&quot;,
        },
        responseType: &quot;json&quot;,
      })
      .then((response) =&gt; {
        this.setState({ tableData: response.data });
      });
}
```
I have also read several answers on Stack Overflow about the same issue, titled `Access-Control-Allow-Origin` but still couldn&#39;t figure out how to solve this. I don&#39;t want to use an extension in Chrome or use a temporary hack to solve this. Please suggest the standard way of solving the above issue.


After trying out few answers I have tried with this,
```js
headers: { 
  &#39;x-apikey&#39;: &#39;59a7ad19f5a9fa0808f11931&#39;,
  &#39;Access-Control-Allow-Origin&#39; : &#39;*&#39;,
  &#39;Access-Control-Allow-Methods&#39;:&#39;GET,PUT,POST,DELETE,PATCH,OPTIONS&#39;,
},
```
Now I get the error as,

&gt; ```none
&gt;Request header field Access-Control-Allow-Origin is not
&gt; allowed by Access-Control-Allow-Headers in preflight response 
&gt;```

Access Control Origin Header error using Axios

I have a Vue 2 project, and I&#39;ve written a simple function for translating months in dates, which I would like to import in one of my components, but I&#39;m getting an error:

&gt; export &#39;default&#39; (imported as &#39;translateDate&#39;) was not found in &#39;@/utils/date-translation&#39;

The relative file path from the src folder is correct, and I am exporting the function like this:

    export function translateDate(date) {
      // my code
    }

And then I am importing it in the component like this:

    import translateDate from &#39;@/utils/date-translation&#39;

What am I doing wrong?


Export default was not found

Within a vuex getter I know it is possible to access the state from another vuex module like so:

    pages: (state, getters, rootState) =&gt; {
        console.log(rootState);
    }

How can I access a getter from another vuex module instead of the state though? 

I have another vuex module called **filters** that I need to access, I have tried this:

    rootState.filters.activeFilters

Where `activeFilters` is my getter but this does not work. using `rootState.filters.getters.activeFilters` also does not work.

How to access the getter from another vuex module?

How do you go on passing objects as props on vue? I would imagine this would be a simple task but apparently not.

I have the following code on a `.vue` file: 

    &lt;template&gt;
      &lt;div id=&quot;scatter&quot;&gt;&lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    export default {
      props: {
        data: {
          type: Object,
          default: () =&gt; ({}),
        },
      },
      mounted() {
        console.log(this.data);
      },
    };
    &lt;/script&gt;

On html I try to pass the `data` props as follows : 

    &lt;component :data=&quot;{x:1}&quot;&gt;&lt;/component&gt;

When I try log it into the console the result is only an empty observer object.

Pass object as prop on Vue

My page currently has Navigation.vue component.
I want to make the each navigation hover and active. The `hover` works but `active` doesn&#39;t.

This is how Navigation.vue file looks like :


    &lt;template&gt;
      &lt;div&gt;
        &lt;nav class=&quot;navbar navbar-expand-lg fixed-top row&quot;&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/&quot; exact&gt;TIME&lt;/router-link&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/CNN&quot; exact&gt;CNN&lt;/router-link&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/TechCrunch&quot; exact&gt;TechCrunch&lt;/router-link&gt;
          &lt;router-link tag=&quot;li&quot; class=&quot;col&quot; class-active=&quot;active&quot; to=&quot;/BBCSport&quot; exact&gt;BBC Sport&lt;/router-link&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/template&gt;

And the following is the style.

    &lt;style&gt;
    nav li:hover,
    nav li:active {
      background-color: indianred;
      cursor: pointer;
    }
    &lt;/style&gt;

This is how hover looks like now and expected exactly same on active.

[![This is how hover looks like now and expected exactly same on active.][1]][1]

  [1]: https://i.stack.imgur.com/wOVg4.png

I would appreciate if you give me an advice for styling `router-link` active works.
Thanks.

Content Type	Original Author	Original Content on Stackoverflow
Question	Karlom	View Question on Stackoverflow
Solution 1 - Javascript	Badis Merabet	View Answer on Stackoverflow

How can I use 'img src' in Vue.js?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

What is the best way to define log TAG constant in Kotlin?

Jest - how to test if a component does not exist?

Attributions