Adding data into pivot table

This is a bit of an open-ended question. Your Vue component could look like this for the select:

// TEMPLATE
        <div class="form-group">
          <label for="selectTeachers">Select multiple Teachers</label>
          <select v-model="formdata.teachers" multiple class="form-control" id="selectTeachers">
            <option v-for="teacher in teachers" :value="teacher.id" v-text="teacher.name"></option>
          </select>
        </div>
        teacher ids: {{formdata.teachers}}

// SCRIPT
    data() {
      return {
        teachers: [
          {id: 1, name: 'Aristotle'},
          {id: 2, name: 'Einstein'},
          {id: 3, name: 'Confucius'},
          {id: 4, name: 'Twain'},
          {id: 5, name: 'Kamvar'},
        ],
      };
    },

As for your Controller, who knows, why don't you post what you have. But,

We expect you would POST somehow the this.formdata from your component, so in your Controller::store() you would have a line like:

  $classroom->teachers()->sync($request->teachers);

Okay I got the select component loaded with teacher ids, now the question is how do I save these ids into the pivot table? Can you help me with controller and vue component?

Here is my current vue component and controller file:- https://jsfiddle.net/g1ejpoan/

Thanks I figured it out!!