Save image type on image upload using vue.js

Question

I'm trying to upload image using vue.js that will be multiple images and user can get preview of those images, but i also want to save image type i.e. user can set primary image from groups of images that are being uploaded, i have given a radio button for that, By default first one will be primary and other images will be secondary. Any help is highly appreciated regarding how to save type with image.

JS Fiddle :

https://jsfiddle.net/jfwv04mu/

HTML:

<div id="app">
  <h2>Images:</h2>
  <div class="row m-2">
    <div v-for="(data, index) in rawData" class="image-input image-input-active d-flex">
      <div class="image-preview">
         <img class="img-responsive h-100" :src="data">
        <button class="btn btn-xs remove-file" @click="removeFile(index)">
          <i class="fa fa-trash " ></i>
        </button>
      </div>
       <input type="radio" name="imgType">
  </div>
 
  <div class="image-input image-input-tbd d-flex" v-if="this.files.length < this.option.maxFileCount">
    <div class="image-preview dropzone d-flex justify-content-center align-items-center" @drop="loaddropfile" @click="openinput">
      <i class="fa fa-plus text-success"></i>
    </div>
    <input type="file" class="d-none" id="vue-file-upload-input" @change="addImage">
  </div>
  </div>
  <div class="row justify-content-center m-2">
    <button class="btn btn-primary" @click="upload">Upload</button>
  </div>
  
  <div class="row">
  
  
  <div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
  </div>
</div>

Vue:

new Vue({
  el: "#app",
  data() {
    return {
      option: {
        maxFileCount: 3
      },
      files:[],
      rawData: [],
    }
  },
  methods: {
    loaddropfile: function(e) {
        e.preventDefault()
      e.stopPropagation()
        alert('ok')
        console.log(e)
    },
    openinput: function() {
        document.getElementById("vue-file-upload-input").click();
    },
    addImage: function(e) {
        const tmpFiles = e.target.files
      if (tmpFiles.length === 0) {
        return false;
      }
      const file = tmpFiles[0]
      this.files.push(file)
      const self = this
        const reader = new FileReader()
      reader.onload = function(e) {
        self.rawData.push(e.target.result)
      }
      reader.readAsDataURL(file)
    },
    removeFile: function(index) {
        this.files.splice(index, 1)
      this.rawData.splice(index, 1)
      document.getElementById("vue-file-upload-input").value = null
    },
    upload: function() {
        alert('Check console to see uploads')
        console.log(this.files)
    }
  },
  mounted(){
  dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  // pretty simple -- but not for IE :(
  fileInput.files = evt.dataTransfer.files;
  evt.preventDefault();
};
  }
})

Answer 1

Bind :value="index" and add v-model="primaryimag" to radio buttons to store selected image

<input type="radio" name="imgType" :value="index" v-model="primaryimg">

check updated your JS fiddle : https://jsfiddle.net/6hvk4dtq/