Upgrade setup to allow for more than email field

Previously you could only set the email field here, but with this change you can set any field.

The `setEmail` method is still kept to keep this backwards compatible.

README.md

@@ -11,9 +11,9 @@ Renderless Vue.js component for Mailchimp list subscriptions.
     @error="onError"
     @success="onSuccess"
   >
-    <template v-slot="{ subscribe, setEmail, error, success, loading }">
+    <template v-slot="{ subscribe, setField, error, success, loading }">
       <form @submit.prevent="subscribe">
-        <input type="email" @input="setEmail($event.target.value)" />
+        <input type="email" @input="setField('EMAIL', $event.target.value)" />
         <button type="submit">Submit</button>
         <div v-if="error">{{ error }}</div>
         <div v-if="success">Yay!</div>

src/vue-mailchimp-subscribe.js

@@ -18,33 +18,35 @@ export default {
       type: String,
     },
   },
-
   data() {
     return {
-      email: null,
+      fields: {},
       success: false,
       error: null,
       loading: false,
     }
   },
-
   computed: {
     data() {
       return queryString.stringify({
         u: this.userId,
         id: this.listId,
-        EMAIL: this.email,
+        ...this.fields,
       })
     },
   },
-
   methods: {
+    // deprecated in favour of `setField('EMAIL', value)`
     setEmail(value = '') {
-      this.email = value.trim()
+      this.fields['EMAIL'] = value.trim()
+    },
+
+    setField(fieldKey, fieldValue) {
+      this.fields[fieldKey] = fieldValue
     },
 
     subscribe() {
-      if (this.email === null || this.loading) {
+      if (!this.fields['EMAIL'] || this.loading) {
         return
       }
 
@@ -72,7 +74,7 @@ export default {
         this.$emit('error', this.error)
       } else {
         this.success = true
-        this.email = null
+        this.fields = {}
         this.$emit('success')
       }
     },
@@ -81,14 +83,14 @@ export default {
       return message.replace('0 - ', '')
     },
   },
-
   render() {
     return this.$scopedSlots.default({
       subscribe: this.subscribe,
       setEmail: this.setEmail,
+      setField: this.setField,
       error: this.error,
       success: this.success,
       loading: this.loading,
     })
   },
-}
+}