Vue.js/javascript create new object onclick, with one value being the value of the list item you clicked on

Question

I have an array of types, that I am displaying as a list using v-for. When the user clicks on one of the list items, I want to create a new object in the allFields object of that type, meaning that the value in the first key-value pair should be whatever "type" the user clicked on. Is this possible and if not, what is a better way to go about this? Thanks in advance!

<ul>
   <li v-for="type in types" @click="addNew">{{ type }}</li>
</ul>


new Vue ({
    el: '#app',
    data: {
      types: [
        'date',
        'number',
        'currency',
        'text'
      ],
      allFields: {

      }
    },
    methods: {
      addNew: function () {
        this.allFields = Object.assign({}, this.allFields, {
          field1: {
            'type': '?????',
            'label': ''
          }
        });
      },
    }
  });

Answer 1

You should pass an argument to your addNew function

Passing the value

<ul>
   <li v-for="type in types" @click="addNew(type)">{{ type }}</li>
</ul>


new Vue ({
    el: '#app',
    data: {
      types: [
        'date',
        'number',
        'currency',
        'text'
      ],
      allFields: {

      }
    },
    methods: {
      addNew: function (type) {
        this.allFields = Object.assign({}, this.allFields, {
          field1: {
            'type': type,
            'label': ''
          }
        });
      },
    }
  });

Passing the key

<ul>
   <li v-for="(type, key) in types" @click="addNew(key)">{{ type }}</li>
</ul>


new Vue ({
    el: '#app',
    data: {
      types: [
        'date',
        'number',
        'currency',
        'text'
      ],
      allFields: {

      }
    },
    methods: {
      addNew: function (key) {
        this.allFields = Object.assign({}, this.allFields, {
          field1: {
            'type': this.types[key],
            'label': ''
          }
        });
      },
    }
  });