如何从以下多部分表单中传递以逗号分隔的多个位置？

Question

我的html表单是

<form method="POST" enctype="multipart/form-data" v-on:submit.prevent="handelSubmit($event);">
  <div class="clear">
    <div class="col-md-3"></div>
    <div class="col-md-6">

      <div class="form-group">
        <label>Offer <small>(required)</small></label>
        <input type="file" name="offer" accept="image/*" required="">

      </div>
      <div class="form-group">

        <div class="form-group">
          <label>Place :</label>
          <select id="basics" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Select Place" name="places" ref="place" multiple="">
        <option v-for="post in places" v-bind:value="post.id" >{{post.name}}</option>
                                                            </select>
        </div>
        <input type='submit' class='btn btn-finish btn-primary' name='finish' value='Finish' />
      </div>
    </div>
</form>

我的vue js代码是

     handelSubmit: function(e) {
           var form = e.target; // Get hold of the form element from the event
           var fd = new FormData(form); // create a FormData
           fd.append('auth-token',this.authType)
           fd.append('post',this.postId)

           console.log(...fd);
            $.ajax({
              url: 'http://127.0.0.1:8000/alpha/add/offer/',
              data: fd,
              type: 'POST',
              processData: false,  // Important!
              contentType: false,
              success: function(e) {
              if (e.status)
              {

                $("#alertModal").modal('show');
              $(".alert").removeClass("hidden").html("Your Offer has been successfully added");


            }
              else {

               alert("Registration Failed") 
              }
          }
            });
            return false;
},

我需要选择多个适合我的地方。我需要发送这些用逗号分隔的多个地方。怎么能发这些地方用逗号隔开，现在是一个一个发。我需要发送以逗号分隔的地点。请帮助我获得同样的信息。

否则还有其他方法吗？

Answer 1

我看不到您在 html 中使用 v-model。只是，使用 v-model 将解决您的问题：

// ...
data() {
  return {
   selectedValues: []
  }
}

现在，当您在 select html 中使用 v-model="selectedValues" 时，vue 会自动将选定的值存储在 selectedValues 中，现在您有了选定值的数组，这样您就可以使用 join() 方法发布它们: (在你的表单数据中构造这个)

this.selectedValues.join(', ');

---

你也可以在 vue 文档中查看example。

Answer 2

我认为您可以使用具有计算值的隐藏字段来解决它。

var app = new Vue({
  el: '#app',
  data: {
    value: []
  },
  computed: {
    commaSeparated() {
      return this.value.join();
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <label>Muiltiple</label>
  <br/>
  <select v-model="value" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
  <br/>
  <input :value="commaSeparated" type="hidden" />
  {{commaSeparated}}
</div>