Vuejs changing the selected target index to data from an array that pertains to the selection-CodePudding

I am trying something different using vuejs, but i want to instead replace it with the nested array data instead of the selected text. As you can see, the selectedChar is displaying the name. Displaying the name there is fine, but in reality i would like to get the value of subjects there if that name is selected in the dropdown

new Vue({
  el: "#app",
  data: {
    todos: [
      { Name: 'DonaldDuck',dept:'Disney',subjects: ["DA_", "AS_1E1", "VV_123", "AP_DS1"] },
      { Name: "Sonic", dept:'Marvel',subjects: ["SA_", "KSL_111", "DD_123", "GP_1SA1"]},

    ],
    selectedChar:'null'
  },
  methods: {
        changeZ (event) {
 
 
       this.selectedChar = event.target.options[event.target.options.selectedIndex].text
       
       
      
    },
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
<select id="dept" @change="changeZ($event)" style="width: 210px;">
  <option value="Select a Department" selected disabled>select a character:</option>
    <option v-for="t in todos" :value="todos.id" :key="todos.id">{{ t.Name }}</option>

</select>

 <p><span>You Selected: {{ selectedChar  }}</span></p>

instead. thanks!

CodePudding user response：

You should really be utilizing v-model to bind the value of the <select> to a data property. The Vue docs specifically have a subsection on binding objects to <select> inputs. When you bind the whole object value you can then display any property of that object.

<select
      id="dept"
      
      v-model="selection"
      style="width: 210px"
    >
      <option v-for="t in todos" :value="t" :key="t.id">
        {{ t.Name }}
      </option>
</select>

<p>
    <span>You Selected: {{ selection.subjects }}</span>
</p>

data: {
    todos: [
      { Name: 'DonaldDuck',dept:'Disney',subjects: ["DA_", "AS_1E1", "VV_123", "AP_DS1"] },
      { Name: "Sonic", dept:'Marvel',subjects: ["SA_", "KSL_111", "DD_123", "GP_1SA1"]},

    ],
    selection: {}
  }