Question

我有一个要求，我必须在数据列表中提出建议，并且当用户选择任何数据列表选项时，我都必须相应地更新其他输入字段。

这是我的输入字段和数据列表代码。

<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中没有事件，因此无法处理，最好编写自己的列表。这是一个示例open in 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
    }
  },
  });

如何处理vuejs中数据列表选项中的事件？

3 个答案: