Блог

Мне требуется выпадающий список поиска, в котором я должен иметь возможность отслеживать несколько изменений данных. В настоящее время у меня есть это в моем html:

 <input list="allUsernames" type="text" v-model="selectedUser">
<datalist id="allUsernames">
  <option v-for="(user, index) in allUsers" 
   :id="user.USERID" 
   :value="user.USERNAME" 
   :email="user.EMAIL">
  </option>
</datalist>
 

Мой тег данных скрипта выглядит следующим образом:

 data(){
  return{
    allUsers: [],
    selectedUserID: '',
    selectedUserEmail: '',
    selectedUser: '',
  }
}
 

allUsers заполняется вызовом SQL, содержащим USERID , USERNAME и EMAIL .

Я хочу, чтобы a watch мог получить :id и :email часть тега option, но прямо сейчас я могу получить значение только по умолчанию:

 watch: {
  selectedUser(val, oldval)
  {
    console.log('this only returns the :value binding:'   val);
    //how do I get :id and :email values?
  }
},
 

Я хочу установить selectedUserID и selectedUserEmail на основе сделанного выбора опции выпадающего списка, используя vbindings :id and :email (чтобы я получал значения user.USERID and user.EMAIL ), как мне это сделать?

Вы можете сделать это более аккуратно, используя только v-model данные, и наблюдение не требуется:

 data(){
  return{
    allUsers: [],
    selectedUser: ''
  }
}
 

value Для параметров требуется только привязка:

 <option v-for="(user, index) in allUsers" :value="user.USERNAME"></option>
 

Используйте вычисляемый для отслеживания полного объекта выбранного пользователя:

 computed: {
  selected() {
    return this.allUsers.find(user => user.USERNAME === this.selectedUser);
  }
}
 

selected Вычисляемый относится ко всему объекту выбранного пользователя, поэтому вы можете использовать selected.USERID and selected.EMAIL как в экземпляре, так и в шаблоне.

Вот демонстрация:

 new Vue({
  el: "#app",
  data(){
    return{
      allUsers: [
        { USERID: 1, USERNAME: 'name1', EMAIL: 'email1' },
        { USERID: 2, USERNAME: 'name2', EMAIL: 'email2' },
        { USERID: 3, USERNAME: 'name3', EMAIL: 'email3' },
      ],
      selectedUser: ''
    }
  },
  computed: {
    selected() {
        return this.allUsers.find(user => user.USERNAME === this.selectedUser);
    }
  }
}); 

 .display {
  margin-top: 30px;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input list="allUsers" type="text" v-model="selectedUser">
  <datalist id="allUsers">
    <option v-for="(user, index) in allUsers" :value="user.USERNAME"></option>
  </datalist>
  
  <div v-if="selected" class="display">
    <div>ID: {{ selected.USERID }}</div>
    <div>EMAIL: {{ selected.EMAIL }}</div>
  </div>
</div> 

Важно помнить, что наблюдение необходимо только в том случае, если вы хотите выполнить асинхронное или основанное на времени действие при изменении данных. В противном случае, в большинстве случаев, используйте вычисляемый.