title: Dynamically change select input in Bootstrap Vue
body: <p>I am trying to set some objects in a Bootstrap-Vue form select which I get via JSON.
  The JSON is made up of teacher objects from the following fields:</p>
  <pre class="lang-json prettyprint-override"><code>[
    {
      &quot;id&quot;: 1,
      &quot;name&quot;: &quot;John&quot;,
      &quot;surname&quot;: &quot;Doe&quot;,
      &quot;email&quot;: &quot;john.doe@gmail.com&quot;
    }
  ]
  </code></pre>
  <p>What I'm trying to do is put the name and surname in the select list, that is the full name.</p>
  <p>I have already managed to do this via a computed property by processing the list.
  But now I want that when I select a teacher, the list of courses is filtered according to the chosen teacher.</p>
  <p>To do this I need the teacher's email, which I can't recover, having processed the teachers to get the full name.
  Consequently, I can't even update the list of courses based on the teacher chosen.</p>
  <p>This is the code for the template:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;b-form-group
    id=&quot;input-group-3&quot;
    label=&quot;Docente:&quot;
    label-for=&quot;input-3&quot;
  &gt;
    &lt;b-form-select
      v-model=&quot;teacher&quot;
      :options=&quot;teachers&quot;
      value-field=&quot;item&quot;
      text-field=&quot;fullName&quot;
      required
      @change=&quot;filterCourse&quot;
    &gt;&lt;/b-form-select&gt;
    &lt;div class=&quot;mt-3&quot;&gt;
      Selected: &lt;strong&gt;{{ teacher }}&lt;/strong&gt;
    &lt;/div&gt;
  &lt;/b-form-group&gt;
  </code></pre>
  <p>This is the script code:</p>
  <pre class="lang-js prettyprint-override"><code>import { mapGetters, mapActions } from &quot;vuex&quot;;
  export default {
    data() {
      return {
        teacher: &quot;&quot;,
        course: &quot;&quot;,
      };
    },
  
    created: function() {
      this.GetActiveTeachers();
      this.GetActiveCourses();
    },
  
    computed: {
      ...mapGetters({
        ActiveTeacherList: &quot;StateActiveTeachers&quot;,
        ActiveCourseList: &quot;StateActiveCourses&quot;,
        FilteredTeacherList: &quot;StateTeacherByCourse&quot;,
        FilteredCourseList: &quot;StateCourseByTeacher&quot;,
      }),
  
      teachers: function() {
        let list = [];
        this.ActiveTeacherList.forEach((element) =&gt; {
          let teacher = element.name + &quot; &quot; + element.surname;
          list.push(teacher);
        });
        return list;
      },
    },
  
    methods: {
      ...mapActions([
        &quot;GetActiveTeachers&quot;,
        &quot;GetActiveCourses&quot;,
        &quot;GetCourseByTeacher&quot;,
        &quot;GetTeacherByCourse&quot;,
        &quot;AssignTeaching&quot;,
      ]),
  
      async filterCourse() {
        const Teacher = {
          teacherEmail: &quot;john.doe@gmail.com&quot;, // For testing purpose
        };
        try {
          await this.GetCourseByTeacher(Teacher);
        } catch {
          console.log(&quot;ERROR&quot;);
        }
      },
  
      async filterTeacher() {
        const Course = {
          title: &quot;Programming&quot;, // For testing purpose
        };
        try {
          await this.GetTeacherByCourse(Course);
        } catch {
          console.log(&quot;ERROR&quot;);
        }
      },
    },
  };
  </code></pre>