获取隐藏输入Vue.Js的自动完成输入值答案

【问题标题】：Get autocomplete input value to a hidden input Vue.Js获取隐藏输入Vue.Js的自动完成输入值
【发布时间】：2019-06-01 11:18:39
【问题描述】：

我使用https://santiblanko.github.io/vue-instant/ 来自动完成 Vue。

它按我的预期工作，只是我无法将“输入”值中的值发布到表单中。

当我提交表单时，输入中的值不会发布到我的后端服务器。

所以我必须在提交时创建一个隐藏值，以便我可以读取该输入值。

如何做到这一点。我只想在点击放大镜图标时提交表单和值。

https://codepen.io/snarex/pen/vwQjWR

<link rel="stylesheet" type="text/css" href="https://unpkg.com/vue-instant@0.0.10/dist/vue-instant.css">
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-clickaway@2.1.0/dist/vue-clickaway.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-instant@1.0.4/dist/vue-instant.browser.js"></script>
<script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!-- TODO: Missing CoffeeScript 2 -->

<script type="text/javascript">
  //<![CDATA[
  window.onload = function() {
    console.log(VueInstant)
    new Vue({
      el: '#app',
      data: {
        value: '',
        suggestionAttribute: 'original_title',
        suggestions: [],
        selectedEvent: ""
      },
      methods: {
        clickInput: function() {
          this.selectedEvent = 'click input'
        },
        clickButton: function() {
          this.selectedEvent = 'click button'
        },
        selected: function() {
          this.selectedEvent = 'selection changed'
        },
        enter: function() {
          this.selectedEvent = 'enter'
        },
        keyUp: function() {
          this.selectedEvent = 'keyup pressed'
        },
        keyDown: function() {
          this.selectedEvent = 'keyDown pressed'
        },
        keyRight: function() {
          this.selectedEvent = 'keyRight pressed'
        },
        clear: function() {
          this.selectedEvent = 'clear input'
        },
        escape: function() {
          this.selectedEvent = 'escape'
        },
        changed: function() {
          var that = this
          this.suggestions = []
          axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
            .then(function(response) {
              response.data.results.forEach(function(a) {
                that.suggestions.push(a)
              })
            })
        }
      },
      components: {
        'vue-instant': VueInstant.VueInstant
      }
    })
  }
  //]]>
</script>

<form action="https://www.google.com" method="GET">
  <div id="app">
    <label>{{selectedEvent}}</label>
    <vue-instant :suggestonallwords="true" :suggestion-attribute="suggestionAttribute" v-model="value" :disabled="false" @input="changed" @click-input="clickInput" @click-button="clickButton" @selected="selected" @enter="enter" @key-up="keyUp" @key-down="keyDown"
      @key-right="keyRight" @clear="clear" @escape="escape" :show-autocomplete="true" :autofocus="false" :suggestions="suggestions" name="customName" placeholder="custom placeholder" type="google"></vue-instant>
  </div>
</form>

【问题讨论】：

您可以查看下面的链接来了解这个想法。在下面的参考链接中使用了 jQuery UI 自动完成，但概念是相同的。 stackoverflow.com/questions/56206676/…
其实你给了我一个想法。我有一种情况，我试图在我的 API 请求中添加一个元素，并且使用我正在使用的当前组件集。在我控制值的地方创建一个隐藏的表单项真的很困难。因此，正如答案所暗示的，我正在制作一个 hiddenformItems Prop，它采用一个数组，我可以将它推入数组 axios 方法中。

标签： javascript jquery html vue.js

【解决方案1】：

如果我理解正确，您想将建议的值发布到表单数据对象内的服务器吗？如果正确，您可以按如下方式更改您的 clickButton 方法。

clickButton: function() {
      this.selectedEvent = 'click button';
      var formData = new FormData();
      formData.append("selectedMovie", this.value);
      axios({
        method: 'post',
        url: '/yourapi/endpoint/',
        data: {
          formData:formData
        }
      }).then(function(response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
      });
    }

【讨论】：

我想发帖，但不想发到终点和网址。我想通过表单操作发送数据。

【解决方案2】：

您可以在表单元素v-on:submit.prevent="send" 的html 中添加以下内容。然后将send 函数添加到组件的方法中，您可以在其中访问this.value 并执行您需要执行的任何操作。

【讨论】：