title: Need Help Creating Object from JSON
body: <p>I am brand new to Vue, and I am having trouble with changing a JSON into an object. Here is an example of my code.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
  &lt;div class=&quot;characters&quot;&gt;
  
  &lt;template&gt;
     &lt;div class=&quot;stat-card&quot;&gt;
       &lt;v-container class=&quot;mx-2&quot;&gt;
         &lt;v-row&gt;
           &lt;v-col cols=&quot;4&quot;&gt;
             &lt;v-text-field
               v-model=&quot;characterID&quot;
               outlined
               label=&quot;Search for a character by ID&quot;
               placeholder=&quot;Enter a numeric character ID&quot;
               type=&quot;text&quot;
               append-icon=&quot;mdi-send&quot;
               @click:append=&quot;fetchCharacter(characterID)&quot;
               @keyup.enter=&quot;fetchCharacter(characterID)&quot;
             &gt;
             &lt;/v-text-field&gt;
           &lt;/v-col&gt;
         &lt;/v-row&gt;
         &lt;v-row&gt;
           &lt;v-card flat&gt;
             &lt;v-card-title&gt;Results:&lt;/v-card-title&gt;
             &lt;v-card-text&gt;
               &lt;pre&gt;{{ characterData.id }}&lt;/pre&gt;
             &lt;/v-card-text&gt;
           &lt;/v-card&gt;
         &lt;/v-row&gt;
       &lt;/v-container&gt;
     &lt;/div&gt;
   &lt;/template&gt;
  
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        characterID: undefined,
        characterDataJSON: {},
        characterData: {},
        statSlider: [
          { attribute: 'example1' },
          { attribute: 'example2' },
        ],
      };
    },
    methods: {
      async fetchCharacter(id) {
        const numericID = parseInt(id, 10);
        const requestURI = `/character/${numericID}`;
        const method = 'GET';
  
        await this.$http({ url: requestURI, data: null, method })
          .then((resp) =&gt; {
            this.characterDataJSON = JSON.stringify(resp.data.data, null, '\t');
            this.characterData = JSON.parse(this.characterDataJSON);
          })
          .catch(() =&gt; {
            const msg = { error: 'character not found' };
            this.characterDataJSON = JSON.stringify(msg, null, '\t');
          });
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Right now <pre>{{ characterData.id }}</pre> is giving me the id, however. I want to do something like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  export default {
    data() {
      return {
        characterID: undefined,
        characterDataJSON: {},
        characterData: {},
        statSlider: [
          { attribute: 'example1', value: characterData.id },
          { attribute: 'example2' },
        ],
      };
    },
  </code></pre>
  <p>When I do this though, I get characterData is undefined.</p>
  <blockquote>
  <p>error  'characterData' is not defined  no-undef</p>
  </blockquote>
  <p>My end goal is to be able to use characterData in my sliders, dropdown menus, and etc... I have been trying different things, but I am so new to Vue I am not sure where to begin. Does anyone know what I should be searching?</p>