Uncaught TypeError: Cannot set property 'isEditMode' of undefined

Multi tool use
Multi tool use












0















I'm trying to convert an AngularJS app to Vue JS. However, I keep getting js errors like "Uncaught TypeError: Cannot set property 'isEditMode' of undefined".



What I'm trying to do here is make the page editable when a vuetify icon is clicked which in turn calls a function and displays some other icons. The code I currently have is as follows:



new Vue({
el: '#app',
data: {
saveView: false,
isPageEdit: false,
saveFailed: false,
isPageLocked: false,
editFailed: false,
timerMessage: false,
boundData:
{
sections: {
isEditMode: null
}
}
},

methods:
{
setedit: function (isEditMode, sectionId) {
this.boundData.sections[sectionId].isEditMode = isEditMode;
validation(sectionId);


How can this be resolved?










share|improve this question



























    0















    I'm trying to convert an AngularJS app to Vue JS. However, I keep getting js errors like "Uncaught TypeError: Cannot set property 'isEditMode' of undefined".



    What I'm trying to do here is make the page editable when a vuetify icon is clicked which in turn calls a function and displays some other icons. The code I currently have is as follows:



    new Vue({
    el: '#app',
    data: {
    saveView: false,
    isPageEdit: false,
    saveFailed: false,
    isPageLocked: false,
    editFailed: false,
    timerMessage: false,
    boundData:
    {
    sections: {
    isEditMode: null
    }
    }
    },

    methods:
    {
    setedit: function (isEditMode, sectionId) {
    this.boundData.sections[sectionId].isEditMode = isEditMode;
    validation(sectionId);


    How can this be resolved?










    share|improve this question

























      0












      0








      0








      I'm trying to convert an AngularJS app to Vue JS. However, I keep getting js errors like "Uncaught TypeError: Cannot set property 'isEditMode' of undefined".



      What I'm trying to do here is make the page editable when a vuetify icon is clicked which in turn calls a function and displays some other icons. The code I currently have is as follows:



      new Vue({
      el: '#app',
      data: {
      saveView: false,
      isPageEdit: false,
      saveFailed: false,
      isPageLocked: false,
      editFailed: false,
      timerMessage: false,
      boundData:
      {
      sections: {
      isEditMode: null
      }
      }
      },

      methods:
      {
      setedit: function (isEditMode, sectionId) {
      this.boundData.sections[sectionId].isEditMode = isEditMode;
      validation(sectionId);


      How can this be resolved?










      share|improve this question














      I'm trying to convert an AngularJS app to Vue JS. However, I keep getting js errors like "Uncaught TypeError: Cannot set property 'isEditMode' of undefined".



      What I'm trying to do here is make the page editable when a vuetify icon is clicked which in turn calls a function and displays some other icons. The code I currently have is as follows:



      new Vue({
      el: '#app',
      data: {
      saveView: false,
      isPageEdit: false,
      saveFailed: false,
      isPageLocked: false,
      editFailed: false,
      timerMessage: false,
      boundData:
      {
      sections: {
      isEditMode: null
      }
      }
      },

      methods:
      {
      setedit: function (isEditMode, sectionId) {
      this.boundData.sections[sectionId].isEditMode = isEditMode;
      validation(sectionId);


      How can this be resolved?







      javascript angularjs vue.js vuejs2 vuetify.js






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 31 '18 at 12:11









      Archit BatraArchit Batra

      305




      305
























          2 Answers
          2






          active

          oldest

          votes


















          1














          you need to make sections an array of objects first. then you can access your property like that



          so something like this



          sections: [
          {isEditMode: null},
          {isEditMode: true},
          ]


          or if you'd like to keep the current data structure you have then you can directly access isEditMode like that this.boundData.sections.isEditMode






          share|improve this answer
























          • Thanks but can you please tell how exactly the data structure can be modified in this case, keeping the sections intact?

            – Archit Batra
            Dec 31 '18 at 12:55











          • writing sections like that makes it an array. so vueJs will always look for a sections property of type array and as you may have expected it won't find it and will always return that undefined error to you. so as I said you have to either make sections an array of objects so you can access it with this line 'this.boundData.sections[sectionId].isEditMode' or keep it as it is and access it like that 'this.boundData.sections.isEditMode'

            – Omar Emad
            Dec 31 '18 at 13:04











          • I understand that but i need help regarding the exact syntax for that in terms of the code...

            – Archit Batra
            Dec 31 '18 at 13:22











          • you're asking vue to read a certain array that doesn't exist! so as far as I know it can't be done with the same exact snytax. you will have to change something

            – Omar Emad
            Dec 31 '18 at 15:05



















          1














          Your data structure doesn't match how you're trying to index it. You have defined



          `boundData.sections.isEditMode`


          and you are trying to reference



          `boundData.sections[sectionId].isEditMode`





          share|improve this answer
























          • Thanks but can you tell how that can be done?

            – Archit Batra
            Dec 31 '18 at 12:29











          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%2f53987367%2funcaught-typeerror-cannot-set-property-iseditmode-of-undefined%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









          1














          you need to make sections an array of objects first. then you can access your property like that



          so something like this



          sections: [
          {isEditMode: null},
          {isEditMode: true},
          ]


          or if you'd like to keep the current data structure you have then you can directly access isEditMode like that this.boundData.sections.isEditMode






          share|improve this answer
























          • Thanks but can you please tell how exactly the data structure can be modified in this case, keeping the sections intact?

            – Archit Batra
            Dec 31 '18 at 12:55











          • writing sections like that makes it an array. so vueJs will always look for a sections property of type array and as you may have expected it won't find it and will always return that undefined error to you. so as I said you have to either make sections an array of objects so you can access it with this line 'this.boundData.sections[sectionId].isEditMode' or keep it as it is and access it like that 'this.boundData.sections.isEditMode'

            – Omar Emad
            Dec 31 '18 at 13:04











          • I understand that but i need help regarding the exact syntax for that in terms of the code...

            – Archit Batra
            Dec 31 '18 at 13:22











          • you're asking vue to read a certain array that doesn't exist! so as far as I know it can't be done with the same exact snytax. you will have to change something

            – Omar Emad
            Dec 31 '18 at 15:05
















          1














          you need to make sections an array of objects first. then you can access your property like that



          so something like this



          sections: [
          {isEditMode: null},
          {isEditMode: true},
          ]


          or if you'd like to keep the current data structure you have then you can directly access isEditMode like that this.boundData.sections.isEditMode






          share|improve this answer
























          • Thanks but can you please tell how exactly the data structure can be modified in this case, keeping the sections intact?

            – Archit Batra
            Dec 31 '18 at 12:55











          • writing sections like that makes it an array. so vueJs will always look for a sections property of type array and as you may have expected it won't find it and will always return that undefined error to you. so as I said you have to either make sections an array of objects so you can access it with this line 'this.boundData.sections[sectionId].isEditMode' or keep it as it is and access it like that 'this.boundData.sections.isEditMode'

            – Omar Emad
            Dec 31 '18 at 13:04











          • I understand that but i need help regarding the exact syntax for that in terms of the code...

            – Archit Batra
            Dec 31 '18 at 13:22











          • you're asking vue to read a certain array that doesn't exist! so as far as I know it can't be done with the same exact snytax. you will have to change something

            – Omar Emad
            Dec 31 '18 at 15:05














          1












          1








          1







          you need to make sections an array of objects first. then you can access your property like that



          so something like this



          sections: [
          {isEditMode: null},
          {isEditMode: true},
          ]


          or if you'd like to keep the current data structure you have then you can directly access isEditMode like that this.boundData.sections.isEditMode






          share|improve this answer













          you need to make sections an array of objects first. then you can access your property like that



          so something like this



          sections: [
          {isEditMode: null},
          {isEditMode: true},
          ]


          or if you'd like to keep the current data structure you have then you can directly access isEditMode like that this.boundData.sections.isEditMode







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 31 '18 at 12:30









          Omar EmadOmar Emad

          6113




          6113













          • Thanks but can you please tell how exactly the data structure can be modified in this case, keeping the sections intact?

            – Archit Batra
            Dec 31 '18 at 12:55











          • writing sections like that makes it an array. so vueJs will always look for a sections property of type array and as you may have expected it won't find it and will always return that undefined error to you. so as I said you have to either make sections an array of objects so you can access it with this line 'this.boundData.sections[sectionId].isEditMode' or keep it as it is and access it like that 'this.boundData.sections.isEditMode'

            – Omar Emad
            Dec 31 '18 at 13:04











          • I understand that but i need help regarding the exact syntax for that in terms of the code...

            – Archit Batra
            Dec 31 '18 at 13:22











          • you're asking vue to read a certain array that doesn't exist! so as far as I know it can't be done with the same exact snytax. you will have to change something

            – Omar Emad
            Dec 31 '18 at 15:05



















          • Thanks but can you please tell how exactly the data structure can be modified in this case, keeping the sections intact?

            – Archit Batra
            Dec 31 '18 at 12:55











          • writing sections like that makes it an array. so vueJs will always look for a sections property of type array and as you may have expected it won't find it and will always return that undefined error to you. so as I said you have to either make sections an array of objects so you can access it with this line 'this.boundData.sections[sectionId].isEditMode' or keep it as it is and access it like that 'this.boundData.sections.isEditMode'

            – Omar Emad
            Dec 31 '18 at 13:04











          • I understand that but i need help regarding the exact syntax for that in terms of the code...

            – Archit Batra
            Dec 31 '18 at 13:22











          • you're asking vue to read a certain array that doesn't exist! so as far as I know it can't be done with the same exact snytax. you will have to change something

            – Omar Emad
            Dec 31 '18 at 15:05

















          Thanks but can you please tell how exactly the data structure can be modified in this case, keeping the sections intact?

          – Archit Batra
          Dec 31 '18 at 12:55





          Thanks but can you please tell how exactly the data structure can be modified in this case, keeping the sections intact?

          – Archit Batra
          Dec 31 '18 at 12:55













          writing sections like that makes it an array. so vueJs will always look for a sections property of type array and as you may have expected it won't find it and will always return that undefined error to you. so as I said you have to either make sections an array of objects so you can access it with this line 'this.boundData.sections[sectionId].isEditMode' or keep it as it is and access it like that 'this.boundData.sections.isEditMode'

          – Omar Emad
          Dec 31 '18 at 13:04





          writing sections like that makes it an array. so vueJs will always look for a sections property of type array and as you may have expected it won't find it and will always return that undefined error to you. so as I said you have to either make sections an array of objects so you can access it with this line 'this.boundData.sections[sectionId].isEditMode' or keep it as it is and access it like that 'this.boundData.sections.isEditMode'

          – Omar Emad
          Dec 31 '18 at 13:04













          I understand that but i need help regarding the exact syntax for that in terms of the code...

          – Archit Batra
          Dec 31 '18 at 13:22





          I understand that but i need help regarding the exact syntax for that in terms of the code...

          – Archit Batra
          Dec 31 '18 at 13:22













          you're asking vue to read a certain array that doesn't exist! so as far as I know it can't be done with the same exact snytax. you will have to change something

          – Omar Emad
          Dec 31 '18 at 15:05





          you're asking vue to read a certain array that doesn't exist! so as far as I know it can't be done with the same exact snytax. you will have to change something

          – Omar Emad
          Dec 31 '18 at 15:05













          1














          Your data structure doesn't match how you're trying to index it. You have defined



          `boundData.sections.isEditMode`


          and you are trying to reference



          `boundData.sections[sectionId].isEditMode`





          share|improve this answer
























          • Thanks but can you tell how that can be done?

            – Archit Batra
            Dec 31 '18 at 12:29
















          1














          Your data structure doesn't match how you're trying to index it. You have defined



          `boundData.sections.isEditMode`


          and you are trying to reference



          `boundData.sections[sectionId].isEditMode`





          share|improve this answer
























          • Thanks but can you tell how that can be done?

            – Archit Batra
            Dec 31 '18 at 12:29














          1












          1








          1







          Your data structure doesn't match how you're trying to index it. You have defined



          `boundData.sections.isEditMode`


          and you are trying to reference



          `boundData.sections[sectionId].isEditMode`





          share|improve this answer













          Your data structure doesn't match how you're trying to index it. You have defined



          `boundData.sections.isEditMode`


          and you are trying to reference



          `boundData.sections[sectionId].isEditMode`






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 31 '18 at 12:18









          Roy JRoy J

          26.8k33258




          26.8k33258













          • Thanks but can you tell how that can be done?

            – Archit Batra
            Dec 31 '18 at 12:29



















          • Thanks but can you tell how that can be done?

            – Archit Batra
            Dec 31 '18 at 12:29

















          Thanks but can you tell how that can be done?

          – Archit Batra
          Dec 31 '18 at 12:29





          Thanks but can you tell how that can be done?

          – Archit Batra
          Dec 31 '18 at 12:29


















          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%2f53987367%2funcaught-typeerror-cannot-set-property-iseditmode-of-undefined%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







          aI,w8ZaPkd92e7s OHdqIZfXQNp8v gef
          uAqRj577ei

          Popular posts from this blog

          Monofisismo

          Angular Downloading a file using contenturl with Basic Authentication

          Olmecas