You can&#39;t use curlies (moustache tags) in attributes. Use the following to concat data:

    &lt;img v-bind:src=&quot;imgPreUrl + &#39;img/logo.png&#39;&quot;&gt;

Or the short version:

    &lt;img :src=&quot;imgPreUrl + &#39;img/logo.png&#39;&quot;&gt;

Read more on dynamic attributes in the [Vue docs](https://vuejs.org/guide/syntax.html#Attributes).

In another case I&#39;m able to use template literal ES6 with backticks,
so for yours could be set as:

    &lt;img v-bind:src=&quot;`${imgPreUrl()}img/logo.png`&quot;&gt;

just try 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;img :src=&quot;require(`${imgPreUrl}img/logo.png`)&quot;&gt;

&lt;!-- end snippet --&gt;



if you handel this from dataBase try :

    &lt;img :src=&quot;baseUrl + &#39;path/path&#39; + obj.key +&#39;.png&#39;&quot;&gt;

If it helps, I am using the following to get a gravatar image:

    &lt;img
            :src=&quot;`https://www.gravatar.com/avatar/${this.gravatarHash(email)}?s=${size}&amp;d=${this.defaultAvatar(email)}`&quot;
            class=&quot;rounded-circle&quot;
            :width=&quot;size&quot;
        /&gt;

Following both method is valid.

### Method 1

Concatenate with `+` sign and wrap string with single/double quotation.

```jsx
&lt;img :src=&quot;imgPreUrl() + &#39;img/logo.png&#39;&quot;&gt;
```

### Method 2
Wrap with backtick `` ` `` and wrap variables with `${variable}`. As `imgPreUrl` is a method so,
```jsx
&lt;img :src=&quot;`${imgPreUrl()}img/logo.png`&quot;&gt;
```

For me, it said Module did not found and not worked.
Finally, I found this solution and worked.

    &lt;img v-bind:src=&quot;require(&#39;@&#39; + baseUrl + &#39;path/path&#39; + obj.key +&#39;.png&#39;)&quot;/&gt;

Needed to add &#39;@&#39; at the beginning of the local path.

I am playing video from a controller like this:

    func playMovie() {
        let path = Bundle.main.path(forResource: &quot;xyz&quot;, ofType:&quot;mov&quot;)
        let url = URL(fileURLWithPath: path!)
        
        self.player = AVPlayer(url: url)
        let layer: AVPlayerLayer = AVPlayerLayer(player: self.player)
        
        layer.frame = self.view.frame
        layer.videoGravity = AVLayerVideoGravityResizeAspectFill
        self.view.layer.addSublayer(layer)
        
        self.player.play()
    }

Even after the controller is destroyed and no longer in use, I get this log message every second or so:

    AQDefaultDevice (173): skipping input stream 0 0 0x0

I am not asking how to hide these logs. I know how to do that by setting ``OS_ACTIVITY_MODE`` to ``disable`` ([See this for how to hide these logs][1]). My concern is that the movie may be still playing somehow even after the controller is destroyed. Is there anything wrong in the way I am playing the movie. Or do I need to perform any additional cleanup?


  [1]: https://stackoverflow.com/a/39509387

Strange AQDefaultDevice logging

I&#39;m trying to provide static IP address to containers. I understand that I have to create a custom network. I create it and the bridge interface is up on the host machine (Ubuntu 16.x). The containers get IP from this subnet but not the static I provided.

Here is my docker-compose.yml:


    version: &#39;2&#39;

    services:
      mysql:
        container_name: mysql
        image: mysql:latest
        restart: always
        environment:
          - MYSQL_ROOT_PASSWORD=root
        ports:
         - &quot;3306:3306&quot;
        networks:
         - vpcbr

      apigw-tomcat:
        container_name: apigw-tomcat
        build: tomcat/.
        ports:
         - &quot;8080:8080&quot;
         - &quot;8009:8009&quot;
        networks:
         - vpcbr
        depends_on:
         - mysql

    networks:
      vpcbr:
        driver: bridge
        ipam:
         config:
           - subnet: 10.5.0.0/16
             gateway: 10.5.0.1
             aux_addresses:
              mysql: 10.5.0.5
              apigw-tomcat: 10.5.0.6

The containers get 10.5.0.2 and 10.5.0.3, instead of 5 and 6.


Provide static IP to docker containers via docker-compose

I want to concatenate Vue.js variable with image URL.

What I computed:

    imgPreUrl : function() {
        if (androidBuild) return &quot;android_asset/www/&quot;;
        else return &quot;&quot;;
    }

If I build for android:

    &lt;img src=&quot;/android_asset/www/img/logo.png&quot;&gt;

Else

    &lt;img src=&quot;img/logo.png&quot;&gt;

How can I concatenate the computed variable with the URL?

I tried it:

    &lt;img src=&quot;{{imgPreUrl}}img/logo.png&quot;&gt;


Vue.js img src concatenate variable and text

I want to concatenate Vue.js variable with image URL.
What I computed:
<pre><code class="hljs language-javascript">imgPreUrl : function() {
 if (androidBuild) return "android_asset/www/";
 else return "";
}
</code></pre>
If I build for android:
<pre><code class="hljs language-css">&#x3C;img src="/android_asset/www/img/logo.png">
</code></pre>
Else
<pre><code class="hljs language-css">&#x3C;img src="img/logo.png">
</code></pre>
How can I concatenate the computed variable with the URL?
I tried it:
<pre><code class="hljs language-css">&#x3C;img src="{{imgPreUrl}}img/logo.png">
</code></pre>

I understand how (and [why][1]) to add a whitespace in JSX, but I am wondering what&#39;s best practice or if any makes any real difference?

**Wrap both elements in a span**
    
    &lt;div className=&quot;top-element-formatting&quot;&gt;
      &lt;span&gt;Hello &lt;/span&gt;
      &lt;span className=&quot;second-word-formatting&quot;&gt;World!&lt;/span&gt;
    &lt;/div&gt;

**Add them on one line**

      &lt;div className=&quot;top-element-formatting&quot;&gt;
        Hello &lt;span className=&quot;second-word-formatting&quot;&gt;World!&lt;/span&gt;
      &lt;/div&gt;

**Add space with JS**

    &lt;div className=&quot;top-element-formatting&quot;&gt;
        Hello {&quot; &quot;}
        &lt;span className=&quot;second-word-formatting&quot;&gt;World!&lt;/span&gt;
    &lt;/div&gt;

  [1]: https://stackoverflow.com/questions/32686728/how-to-avoid-jsx-component-from-condensing-when-react-js-rendering-it

Best practice when adding whitespace in JSX

I am trying to add lint-fix in my package.json.
My basic lint is `&quot;lint&quot;: &quot;eslint --ext .js,.vue src test/unit/specs test/e2e/specs&quot;`

I did try `&quot;lint-fix&quot;: &quot;eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs&quot;` but it is throwing my errors but not fixing them.

What do I have to change?

The error from NPM is:

    217 problems (217 errors, 0 warnings)
    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv &quot;C:\\Program Files\\nodejs\\node.exe&quot; &quot;C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js&quot; &quot;run-script&quot; &quot;lint-fix&quot;
    npm ERR! node v5.10.1
    npm ERR! npm v3.8.3
    npm ERR! code ELIFECYCLE
    npm ERR! quasar-app@0.0.1 lint-fix: eslint --fix --ext .js,.vue src
    npm ERR! Exit status 1
    npm ERR! but it is caused by exit code 1 which is result of finding errors.


How to run eslint --fix from npm script

How can I use react-router, and have a link navigate to a particular place on a particular page? (e.g. `/home-page#section-three`)

**Details**:

I am using `react-router` in my React app. 

I have a site-wide navbar that needs to link to a particular parts of a page, like `/home-page#section-three`.  

So even if you are on say `/blog`, clicking this link will still load the home page, with section-three scrolled into view. This is exactly how a standard `&lt;a href=&quot;/home-page#section-three&gt;` would work.

**Note**: The creators of react-router have not given an explicit answer. They say it is in progress, and in the mean time use other people&#39;s answers.  I&#39;ll do my best to keep this question updated with progress &amp; possible solutions until a dominant one emerges.

**Research**:

----
https://stackoverflow.com/questions/28893855/how-to-use-normal-anchor-links-with-react-router

This question is from 2015 (so 10 years ago in react time). The most upvoted answer says to use `HistoryLocation` instead of `HashLocation`.  Basically that means store the location in the window history, instead of in the hash fragment. 

Bad news is... even using HistoryLocation (what most tutorials and docs say to do in 2016), anchor tags still don&#39;t work.

----
https://github.com/ReactTraining/react-router/issues/394

A thread on ReactTraining about how use anchor links with react-router. This is no confirmed answer. Be careful since most proposed answers are out of date (e.g. using the &quot;hash&quot; prop in `&lt;Link&gt;`)

----

Use anchors with react-router

I have gotten outside of GET and POST methods with Fetch. But I couldn&#39;t find any good DELETE and PUT example. 

So, I ask you for it. Could you give a good example of DELETE and PUT methods with fetch. And explain it a little bit. 

Javascript: Fetch DELETE and PUT requests

Is there a recommended naming convention for key names within a const object in es6? I haven&#39;t been able to find a resource which states if they should be uppercase or lowercase.


    const COLOR_CODES = {
      BLUE: 1,
      RED: 1
    };
vs

    const COLOR_CODES = {
      blue: 1,
      red: 1
    };

[The examples](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) from this MDN article show both styles, so maybe both are acceptable.

Naming convention for const object keys in ES6

How can I use computed property in lists. I am using VueJS v2.0.2.

Here&#39;s the HTML:
    
    &lt;div id=&quot;el&quot;&gt;
        &lt;p v-for=&quot;item in items&quot;&gt;
            &lt;span&gt;{{fullName}}&lt;/span&gt;
        &lt;/p&gt;
    &lt;/div&gt;

Here&#39;s the Vue code:

    var items = [
        { id:1, firstname:&#39;John&#39;, lastname: &#39;Doe&#39; },
        { id:2, firstname:&#39;Martin&#39;, lastname: &#39;Bust&#39; }
    ];

    var vm = new Vue({
        el: &#39;#el&#39;,
        data: { items: items },
        computed: {
            fullName: function(item) {
                return item.firstname + &#39; &#39; + item.lastname;
            },
        },
    });


VueJS How can I use computed property with v-for

**1.** How can I set the default value for a component prop in Vue 2? For example, there is a simple `movies` component that can be used in this way:

    &lt;movies year=&quot;2016&quot;&gt;&lt;movies&gt;



    Vue.component(&#39;movies&#39;, {
        props: [&#39;year&#39;],
    
        template: &#39;#movies-template&#39;,
        ...
    }

But, if a user doesn&#39;t specify the `year`:

    &lt;movies&gt;&lt;/movies&gt;

then the component will take some default value for the `year` prop.

**2.** Also, what is the best way to check if a user did not set the prop? Is this a good way:

    if (this.year != null) {
        // do something
    }

or maybe this:

    if (!this.year) {
        // do something
    }
**?**

Default values for Vue component props &amp; how to check if a user did not set the prop?

I am trying to set query params with [Vue-router][1] when changing input fields, I don&#39;t want to navigate to some other page but just want to modify url query params on the same page, I am doing like this:

    this.$router.replace({ query: { q1: &quot;q1&quot; } })

But this also refreshes the page and sets the y position to 0, ie scrolls to the top of the page. Is this the correct way to set the URL query params or is there a better way to do it.


----------
Edited:

Here is my router code:

    export default new Router({
      mode: &#39;history&#39;,
      scrollBehavior: (to, from, savedPosition)  =&gt; {
        if (to.hash) {
          return {selector: to.hash}
        } else {
          return {x: 0, y: 0}
        }
      },
      routes: [
        ....... 
        { path: &#39;/user/:id&#39;, component: UserView },
      ]
    })

  [1]: https://github.com/vuejs/vue-router


How to set URL query params in Vue with Vue-Router

Can someone explain when you would use a dispatch versus a commit?

I understand a commit triggers mutation, and a dispatch triggers an action.

However, isn&#39;t a dispatch also a type of action? 



Vuex 2.0 Dispatch versus Commit

So I want to pass props to an Vue component, but I expect these props to change in future from inside that component e.g. when I update that Vue component from inside using AJAX. So they are only for initialization of component.


My `cars-list` Vue component element where I pass props with initial properties to `single-car`:

   
    // cars-list.vue

    &lt;script&gt;
        export default {
            data: function() {
                return {
                    cars: [
                        {
                            color: &#39;red&#39;,
                            maxSpeed: 200,
                        },
                        {
                            color: &#39;blue&#39;,
                            maxSpeed: 195,
                        },
                    ]
                }
            },
        }
    &lt;/script&gt;

    &lt;template&gt;
        &lt;div&gt;
            &lt;template v-for=&quot;car in cars&quot;&gt;
                &lt;single-car :initial-properties=&quot;car&quot;&gt;&lt;/single-car&gt;
            &lt;/template&gt;
        &lt;/div&gt;
    &lt;/template&gt;


The way I do it right now it that inside my `single-car` component I&#39;m assigning  `this.initialProperties` to my `this.data.properties` on `created()` initialization hook. And it works and is reactive.


    // single-car.vue

    &lt;script&gt;
        export default {
            data: function() {
                return {
                    properties: {},
                }
            },
            created: function(){
                this.data.properties = this.initialProperties;
            },
        }
    &lt;/script&gt;

    &lt;template&gt;
        &lt;div&gt;Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}&lt;/div&gt;
    &lt;/template&gt;



But my problem with that is that I don&#39;t know if that&#39;s a correct way to do it? Won&#39;t it cause me some troubles along the road? Or is there a better way to do it?


What&#39;s the correct way to pass props as initial data in Vue.js 2?

I have a case where in my `Vue.js` with `webpack` web app, I need to display dynamic images. I want to show `img` where file name of images are stored in a variable. That variable is a `computed` property which is returning a `Vuex` store variable, which is being populated asynchronously on `beforeMount`.

    &lt;div class=&quot;col-lg-2&quot; v-for=&quot;pic in pics&quot;&gt;
       &lt;img v-bind:src=&quot;&#39;../assets/&#39; + pic + &#39;.png&#39;&quot; v-bind:alt=&quot;pic&quot;&gt;
    &lt;/div&gt;

However it works perfectly when I just do:

    &lt;img src=&quot;../assets/dog.png&quot; alt=&quot;dog&quot;&gt;

My case is similar to this [fiddle][1], but here it works with img URL, but in mine with actual file paths, it does not work.

What should be correct way to do it?


  [1]: https://jsfiddle.net/9a6Lg2vd/5/

Vue.js dynamic images not working

is this possible to pass parameter in computed properties in Vue.Js. I can see when having getters/setter using computed, they can take a parameter and assign it to a variable. like here from [documentation][1]:

    // ...
    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + &#39; &#39; + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(&#39; &#39;)
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
    // ...
Is this also possible:

    // ...
    computed: {
      fullName: function (salut) {
          return salut + &#39; &#39; + this.firstName + &#39; &#39; + this.lastName    
      }
    }
    // ...

Where computed property takes a argument and returns desired output. However when I try this, I am getting this error:

&gt;vue.common.js:2250 Uncaught TypeError: fullName is not a function(…)

Should I be using methods for such cases?

  [1]: https://vuejs.org/v2/guide/computed.html


Can I pass parameters in computed properties in Vue.Js

I have a function that helps filter data. I am using `v-on:change` when a user changes the selection but I also need the function to be called even before the user selects the data. I have done the same with `AngularJS` previously using `ng-init` but I understand that there is no such a directive in `vue.js` 

This is my function:

    getUnits: function () {
            var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};

            this.$http.post(&#39;/admin/units&#39;, input).then(function (response) {
                console.log(response.data);
                this.units = response.data;
            }, function (response) {
                console.log(response)
            });
        }

In the `blade` file I use blade forms to perform the filters:

    &lt;div class=&quot;large-2 columns&quot;&gt;
            {!! Form::select(&#39;floor&#39;, $floors,null, [&#39;class&#39;=&gt;&#39;form-control&#39;, &#39;placeholder&#39;=&gt;&#39;All Floors&#39;, &#39;v-model&#39;=&gt;&#39;floor&#39;, &#39;v-on:change&#39;=&gt;&#39;getUnits()&#39; ]) !!}
        &lt;/div&gt;
        &lt;div class=&quot;large-3 columns&quot;&gt;
            {!! Form::select(&#39;unit_type&#39;, $unit_types,null, [&#39;class&#39;=&gt;&#39;form-control&#39;, &#39;placeholder&#39;=&gt;&#39;All Unit Types&#39;, &#39;v-model&#39;=&gt;&#39;unit_type&#39;, &#39;v-on:change&#39;=&gt;&#39;getUnits()&#39; ]) !!}
        &lt;/div&gt;

This works fine when I select a specific item. Then if I click on all lets say `all floors`, it works. What I need is when the page is loaded, it calls the `getUnits` method which will perform the `$http.post` with empty input. In the backend I have handled the request in a way that if the input is empty it will give all the data. 

How can I do this in `vuejs2`?

My Code: http://jsfiddle.net/q83bnLrx 



How to call a vue.js function on page load

I have a javascript variable which I want to pass globally to Vue components upon instantiation thus either each registered component has it as a property or it can be accessed globally.

Note:: I need to set this global variable for vuejs as a **READ ONLY** property

Content Type	Original Author	Original Content on Stackoverflow
Question	ketom	View Question on Stackoverflow
Solution 1 - Javascript	Dan Mindru	View Answer on Stackoverflow
Solution 2 - Javascript	Ardhi	View Answer on Stackoverflow
Solution 3 - Javascript	iliketofu	View Answer on Stackoverflow
Solution 4 - Javascript	Mostafa Ahmed	View Answer on Stackoverflow
Solution 5 - Javascript	Andy	View Answer on Stackoverflow
Solution 6 - Javascript	Bedram Tamang	View Answer on Stackoverflow
Solution 7 - Javascript	Ares	View Answer on Stackoverflow

Vue.js img src concatenate variable and text

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

Solution 6 - Javascript

Method 1

Method 2

Solution 7 - Javascript

Provide static IP to docker containers via docker-compose

Strange AQDefaultDevice logging

Attributions