Vue.js cannot add style from method












0















I'd like to add some styles into html element from methods:



<div class="add-profile-img" v-bind:style="getBackgroundImg()">


The method is:



getBackgroundImg: function() {
return {
width: 180px;
height: 180px;
background-color: 'yellow';
background-image:url(this.BASE_URL +'/uploads/noimg.gif');
}
},


However, I get



Syntax Error:   Identifier directly after number (79:13)

77 | getBackgroundImg: function() {
78 | return {
> 79 | width: 180px;
| ^


How can I fix it?










share|improve this question



























    0















    I'd like to add some styles into html element from methods:



    <div class="add-profile-img" v-bind:style="getBackgroundImg()">


    The method is:



    getBackgroundImg: function() {
    return {
    width: 180px;
    height: 180px;
    background-color: 'yellow';
    background-image:url(this.BASE_URL +'/uploads/noimg.gif');
    }
    },


    However, I get



    Syntax Error:   Identifier directly after number (79:13)

    77 | getBackgroundImg: function() {
    78 | return {
    > 79 | width: 180px;
    | ^


    How can I fix it?










    share|improve this question

























      0












      0








      0


      0






      I'd like to add some styles into html element from methods:



      <div class="add-profile-img" v-bind:style="getBackgroundImg()">


      The method is:



      getBackgroundImg: function() {
      return {
      width: 180px;
      height: 180px;
      background-color: 'yellow';
      background-image:url(this.BASE_URL +'/uploads/noimg.gif');
      }
      },


      However, I get



      Syntax Error:   Identifier directly after number (79:13)

      77 | getBackgroundImg: function() {
      78 | return {
      > 79 | width: 180px;
      | ^


      How can I fix it?










      share|improve this question














      I'd like to add some styles into html element from methods:



      <div class="add-profile-img" v-bind:style="getBackgroundImg()">


      The method is:



      getBackgroundImg: function() {
      return {
      width: 180px;
      height: 180px;
      background-color: 'yellow';
      background-image:url(this.BASE_URL +'/uploads/noimg.gif');
      }
      },


      However, I get



      Syntax Error:   Identifier directly after number (79:13)

      77 | getBackgroundImg: function() {
      78 | return {
      > 79 | width: 180px;
      | ^


      How can I fix it?







      javascript vue.js






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 13 '18 at 19:00









      BabrBabr

      31019




      31019
























          2 Answers
          2






          active

          oldest

          votes


















          2














          Dimension in pixels need to be in string format so the function return a valid javascript object:



          return {   
          width: '180px',
          height: '180px',
          'background-color': 'yellow',
          'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
          }





          share|improve this answer


























          • I still get: Unexpected token, expected "," (79:17).

            – Babr
            Nov 13 '18 at 19:04











          • change semi colon to ,. See the update

            – Psidom
            Nov 13 '18 at 19:05











          • Well, now I get Unexpected token, expected "," (81:21) pointing at background-image's dash.

            – Babr
            Nov 13 '18 at 19:07











          • both background-color and background-image should be quoted. Javascript variable name can't contain dash -

            – Psidom
            Nov 13 '18 at 19:10






          • 1





            I'm sorry I had an extra backtick hanging around. Your answer is correct. Thanks dude!

            – Babr
            Nov 13 '18 at 19:22





















          2














          can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)



          data(){
          return{
          yourStyleVariable: {
          backgroundColor: 'red'
          }
          }
          }





          share|improve this answer
























          • I want to use this.BASE_URL without hard coding its value. AFAIK I can not do that in <style> part of vue component. Hence the question.

            – Babr
            Nov 13 '18 at 19:19











          • why not using a computed property?

            – nedsilon
            Nov 13 '18 at 19:47











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287839%2fvue-js-cannot-add-style-from-method%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          Dimension in pixels need to be in string format so the function return a valid javascript object:



          return {   
          width: '180px',
          height: '180px',
          'background-color': 'yellow',
          'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
          }





          share|improve this answer


























          • I still get: Unexpected token, expected "," (79:17).

            – Babr
            Nov 13 '18 at 19:04











          • change semi colon to ,. See the update

            – Psidom
            Nov 13 '18 at 19:05











          • Well, now I get Unexpected token, expected "," (81:21) pointing at background-image's dash.

            – Babr
            Nov 13 '18 at 19:07











          • both background-color and background-image should be quoted. Javascript variable name can't contain dash -

            – Psidom
            Nov 13 '18 at 19:10






          • 1





            I'm sorry I had an extra backtick hanging around. Your answer is correct. Thanks dude!

            – Babr
            Nov 13 '18 at 19:22


















          2














          Dimension in pixels need to be in string format so the function return a valid javascript object:



          return {   
          width: '180px',
          height: '180px',
          'background-color': 'yellow',
          'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
          }





          share|improve this answer


























          • I still get: Unexpected token, expected "," (79:17).

            – Babr
            Nov 13 '18 at 19:04











          • change semi colon to ,. See the update

            – Psidom
            Nov 13 '18 at 19:05











          • Well, now I get Unexpected token, expected "," (81:21) pointing at background-image's dash.

            – Babr
            Nov 13 '18 at 19:07











          • both background-color and background-image should be quoted. Javascript variable name can't contain dash -

            – Psidom
            Nov 13 '18 at 19:10






          • 1





            I'm sorry I had an extra backtick hanging around. Your answer is correct. Thanks dude!

            – Babr
            Nov 13 '18 at 19:22
















          2












          2








          2







          Dimension in pixels need to be in string format so the function return a valid javascript object:



          return {   
          width: '180px',
          height: '180px',
          'background-color': 'yellow',
          'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
          }





          share|improve this answer















          Dimension in pixels need to be in string format so the function return a valid javascript object:



          return {   
          width: '180px',
          height: '180px',
          'background-color': 'yellow',
          'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 13 '18 at 19:09

























          answered Nov 13 '18 at 19:02









          PsidomPsidom

          123k1283126




          123k1283126













          • I still get: Unexpected token, expected "," (79:17).

            – Babr
            Nov 13 '18 at 19:04











          • change semi colon to ,. See the update

            – Psidom
            Nov 13 '18 at 19:05











          • Well, now I get Unexpected token, expected "," (81:21) pointing at background-image's dash.

            – Babr
            Nov 13 '18 at 19:07











          • both background-color and background-image should be quoted. Javascript variable name can't contain dash -

            – Psidom
            Nov 13 '18 at 19:10






          • 1





            I'm sorry I had an extra backtick hanging around. Your answer is correct. Thanks dude!

            – Babr
            Nov 13 '18 at 19:22





















          • I still get: Unexpected token, expected "," (79:17).

            – Babr
            Nov 13 '18 at 19:04











          • change semi colon to ,. See the update

            – Psidom
            Nov 13 '18 at 19:05











          • Well, now I get Unexpected token, expected "," (81:21) pointing at background-image's dash.

            – Babr
            Nov 13 '18 at 19:07











          • both background-color and background-image should be quoted. Javascript variable name can't contain dash -

            – Psidom
            Nov 13 '18 at 19:10






          • 1





            I'm sorry I had an extra backtick hanging around. Your answer is correct. Thanks dude!

            – Babr
            Nov 13 '18 at 19:22



















          I still get: Unexpected token, expected "," (79:17).

          – Babr
          Nov 13 '18 at 19:04





          I still get: Unexpected token, expected "," (79:17).

          – Babr
          Nov 13 '18 at 19:04













          change semi colon to ,. See the update

          – Psidom
          Nov 13 '18 at 19:05





          change semi colon to ,. See the update

          – Psidom
          Nov 13 '18 at 19:05













          Well, now I get Unexpected token, expected "," (81:21) pointing at background-image's dash.

          – Babr
          Nov 13 '18 at 19:07





          Well, now I get Unexpected token, expected "," (81:21) pointing at background-image's dash.

          – Babr
          Nov 13 '18 at 19:07













          both background-color and background-image should be quoted. Javascript variable name can't contain dash -

          – Psidom
          Nov 13 '18 at 19:10





          both background-color and background-image should be quoted. Javascript variable name can't contain dash -

          – Psidom
          Nov 13 '18 at 19:10




          1




          1





          I'm sorry I had an extra backtick hanging around. Your answer is correct. Thanks dude!

          – Babr
          Nov 13 '18 at 19:22







          I'm sorry I had an extra backtick hanging around. Your answer is correct. Thanks dude!

          – Babr
          Nov 13 '18 at 19:22















          2














          can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)



          data(){
          return{
          yourStyleVariable: {
          backgroundColor: 'red'
          }
          }
          }





          share|improve this answer
























          • I want to use this.BASE_URL without hard coding its value. AFAIK I can not do that in <style> part of vue component. Hence the question.

            – Babr
            Nov 13 '18 at 19:19











          • why not using a computed property?

            – nedsilon
            Nov 13 '18 at 19:47
















          2














          can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)



          data(){
          return{
          yourStyleVariable: {
          backgroundColor: 'red'
          }
          }
          }





          share|improve this answer
























          • I want to use this.BASE_URL without hard coding its value. AFAIK I can not do that in <style> part of vue component. Hence the question.

            – Babr
            Nov 13 '18 at 19:19











          • why not using a computed property?

            – nedsilon
            Nov 13 '18 at 19:47














          2












          2








          2







          can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)



          data(){
          return{
          yourStyleVariable: {
          backgroundColor: 'red'
          }
          }
          }





          share|improve this answer













          can I ask why would you want to do that? As far as I know if you bind a style, just create the object in the data object and do not forget to use the style sintax adapted for javascript. (Camelcase)



          data(){
          return{
          yourStyleVariable: {
          backgroundColor: 'red'
          }
          }
          }






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 13 '18 at 19:16









          nedsilonnedsilon

          212




          212













          • I want to use this.BASE_URL without hard coding its value. AFAIK I can not do that in <style> part of vue component. Hence the question.

            – Babr
            Nov 13 '18 at 19:19











          • why not using a computed property?

            – nedsilon
            Nov 13 '18 at 19:47



















          • I want to use this.BASE_URL without hard coding its value. AFAIK I can not do that in <style> part of vue component. Hence the question.

            – Babr
            Nov 13 '18 at 19:19











          • why not using a computed property?

            – nedsilon
            Nov 13 '18 at 19:47

















          I want to use this.BASE_URL without hard coding its value. AFAIK I can not do that in <style> part of vue component. Hence the question.

          – Babr
          Nov 13 '18 at 19:19





          I want to use this.BASE_URL without hard coding its value. AFAIK I can not do that in <style> part of vue component. Hence the question.

          – Babr
          Nov 13 '18 at 19:19













          why not using a computed property?

          – nedsilon
          Nov 13 '18 at 19:47





          why not using a computed property?

          – nedsilon
          Nov 13 '18 at 19:47


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53287839%2fvue-js-cannot-add-style-from-method%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Bressuire

          Vorschmack

          Quarantine