如何處理 vuejs 中數據列表選項中的事件？

Question

我有一個要求，我必須在數據列表中提出建議，當用戶選擇任何數據列表選項時，我必須相應地更新其他輸入字段。

這是我的輸入字段和 Datalist 代碼。

<input type="text" v-model="party.name" class="form-control form-control-sm shadow-sm" @input="searchPartyByName()" placeholder="Party name" list="queriedParties"/>

<datalist id="queriedParties">
    <option v-for="party in queriedParties">{{party.name}}</option>
</datalist>

現在，我想要的是，當用戶點擊enter或click特定數據列表選項時，我想更新我的這個輸入字段（默認情況下是數據列表），但我也想設置其他表單字段。

我已將其他表單字段與我的party數據對象綁定。 因此，只有當我可以通過 datalist 選項上的任何事件更新我的party數據對象時，我才會感到高興！ 我想要這樣的東西。

<option v-for="party in queriedParties" @click="setParty(party)">{{party.name}}</option>

我已經嘗試了上面給出的示例，但它不起作用。 我也嘗試過@change但它也不起作用！

有什么辦法可以做到這一點嗎？ 我檢查了幾乎所有可用的文章、jsfiddles 和 codepens，但沒有一個能解決我的問題。

Answer 1

datalist 沒有事件，但輸入有。 您應該執行以下操作：

<template>
  <input type="text" v-model="party.name" .... />
  <datalist id="queriedParties">
    <option v-for="party in queriedParties">{{party.name}}</option>
  </datalist>
</template>

<script>
export default {
    watch: {
        party: {
            deep: true,
            handler (old_party, new_party) {
              if (old_party.name !== new_party.name) this.searchPartyByName(new_party.name)
            }
        }
}
</script>

Answer 2

您的queriedParties似乎是一個對象數組。 如果您只有一個字符串數組，它是否有效？

對於對象，請使用以下內容：

<template>
  <div class="sourceselection">
    <div>
      <div class="jumbotron">
        <h2><span class="glyphicon glyphicon-list-alt"></span>&nbsp;News List</h2>
        <h4>Select News Source</h4>
          <input v-model="source" list="newssources-list" v-on:input="sourceChanged" 
                 name="source-selection" id="source-selection" class="form-control" 
                 placeholder="Please specify news source ..."/>
          <datalist id="newssources-list">
            <option v-for="source in sources" v-bind:value="source.name"  v-bind:label="source.name"></option>
          </datalist>
        <div v-if="deepSource">
          <h6>{{deepSource.description}}</h6>
          <a v-bind:href="deepSource.url" class="btn btn-primary" target="_blank">Go To {{deepSource.name}} Website</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sourceselection',
  data () {
    return {
      sources: [],
      source: '',
      deepSource: ''
    }
  },
  methods: {
    sourceChanged: function(e) {
      console.log("source = "+this.source+" new value = "+e.target.value);
      var newSource = e.target.value;
     // only action if value is different from current deepSource 
     if (newSource!= this.deepSource.name) { 
       for (var i=0; i<this.sources.length; i++) {
         if (this.sources[i].name == newSource) {
           this.deepSource = this.sources[i];
           this.source = this.deepSource.name;
         }
       }
       this.$emit('sourceChanged', this.deepSource.id);
     }
    }
  },
  created: function () {
    var api = "https://newsapi.org/v1/sources?language=en";
    this.axios.get(api).then((response) => {
        this.sources = response.data.sources;
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 3

datalist沒有事件，所以你處理不了，你最好自己寫一個列表。 這是在 codepen 中打開的示例：

//pug
#app
  .form-group.has-feedback
    input.input-search.form-control(type='text', v-model='word', placeholder='Search')
    ul#list(v-if='Object.keys(filtered_projects).length > 0')
      li(v-for='(value, key) in filtered_projects', @click='gotoProjectPage(key)')
        span {{value}}
        p {{key}}
    span.glyphicon.glyphicon-search.form-control-feedback

/*css*/
body {
  margin: 10px;
}
#app {
  width: 400px;
}
#list {
  font-size: 12px;
  list-style: none;
  margin: 0;
  padding: 5px 0;
  background-color: white;
  border-radius: 0 0 5px 5px;
  border: 1px #ccc solid;
}
#list li {
  display: block;
  padding: 5px 15px;
}
#list li:hover {
  background-color: #ccc;
}
#list li span {
  font-weight: 550;
}
#list li p {
  margin: 5px 0 0;
}

//js
var app = new Vue({
  el: '#app',
  data: {
    word: '',
    projects: {"DataCenterMetro":"TEST1","IFF_Handway":"國際香料","SPH_Handway":"上葯控股廣東有限公司空調系統","QingTang_GZ":"廣州地鐵_清塘站","BTE_Handway":"白天鵝賓館","NSSC_SZ":"深圳地鐵_南山書城站","TA0301_Handway":"天安雲谷二期"}
  },
  computed: {
    filtered_projects: function () {
      var vm = this, result = {};
      if (vm.word) {
        for(var key in vm.projects) {
          if(key.toLowerCase().indexOf(vm.word) != -1 || vm.projects[key].toLowerCase().indexOf(vm.word) != -1)
            result[key] = vm.projects[key];
        }
      }
      return result;
    }
  },
  created: function () {
    var vm = this;
    //TODO get projects
  },
  methods: {
    gotoProjectPage: function (key) {
      console.log('/map_login?project=' + key);
      //TODO handle
    }
  },
  });