title: Object assignment in Vue.js method
body: <p>I have a Vue component in which I select a specific value from an array of objects then attempt to copy some fields from that value into Vue data</p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;h4&gt;Add Item&lt;/h4&gt;
      &lt;form @submit.prevent="addItem(item.Code)"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="ItemCode"&gt;Code&lt;/label&gt;&amp;nbsp;
              &lt;select
                id="ItemCode"
                v-model="item.Code"
              &gt;
                &lt;input
                  v-model="item.Code"
                  type="hidden"
                &gt;
                &lt;option
                  v-for="part in PartCodes"
                  :key="part"
                &gt;
                  {{ part }}
                &lt;/option&gt;
              &lt;/select&gt;
     .
     .
     .
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>where the data is </p>
  
  <pre><code>  data() {
      return {
        item: {},
        parts: [],
      };
    },
    computed: {
      PartCodes: function () {
        return [...new Set(this.parts.map(p =&gt; p.Code))];
      },
    },
    created() {
      let uri = '/parts';
      if (process.env.NODE_ENV !== 'production') {
        uri = 'http://localhost:4000/parts';
      }
      this.axios.get(uri).then(response =&gt; {
        this.parts = response.data;
      });
    },
    methods: {
      addItem(selectCode) {
        let uri = '/items/create';
        if (process.env.NODE_ENV !== 'production') {
          uri = 'http://localhost:4000/items/create';
        }
        let selectPart = this.parts.filter( obj =&gt; {
          return obj.Code === selectCode;
        });
  
        this.item.Description = selectPart.Description;
        this.item.Cost = selectPart.Cost;
        this.item.Price = selectPart.Price);
  
        this.axios.post(uri, this.item)
          .then(() =&gt; {
            this.$router.push({name: 'QuoteIndex'});
          });
      }
    }
  };
  
  </code></pre>
  
  <p>When I log the object 'selectPart'  it has the correct fields but assigning these fields into the object 'items' results in 'undefined' values</p>
  
  <p>I must be doing something wrong with scope but I don't know what is wrong.</p>
  
  <p>Please suggest how I can copy fields with this Component</p>
  
  <p>Thanks
  <a href="https://i.stack.imgur.com/ESjUf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ESjUf.png" alt="enter image description here"></a></p>