javascript - 如何在vue js中以逗号分隔的字符串中发布子类别？

Question

现在我可以通过以下方式发布子类别吗？现在结果是

subcategory[] : Healthcare
subcategory[] : education

但是我需要将其作为用逗号分隔的字符串来获取？

我的html代码是

<div id="submitBox">
  <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
    <select id="basic" class="selectpicker"  data-live-search="true" data-live-search-style="begins" title="Select Your City" v-model="subcategory" name="subcategory[]" multiple>
      <option v-for="so in services" v-bind:value="so.name">{{so.name}}</option>  
   </form>
</div>

我的vue js代码是

<script>
submitBox = new Vue({
  el: "#submitBox",
  data: {
    subcategory: [],
  },
  methods: {
    handelSubmit: function(e) {
      var vm = this;
      data = {};
      data['subcategory'] = this.subcategory;
      $.ajax({
        url: '/post/',
        data: data,
        type: "POST",
        dataType: 'json',
        success: function(e) {
          if (e.status) {
            alert("Registration Success")
          } 
        }
      });
      return false;
    }
  },
});
</script>

我需要发布数据

subcategory : healthcare,education

有人可以帮我解决同样的问题吗？

Answer 1

this.subcategory 是一个数组，您可以使用 join 将其转换为字符串像这样:

let services = [
  {name: 'Hamburger'},
  {name: 'Sandwich'},
  {name: 'Hotdog'}
];

submitBox = new Vue({
  el: "#submitBox",
  data: {
    subcategory: [],
  },
  methods: {
    handelSubmit: function(e) {
      var vm = this;
      data = {};
      data['subcategory'] = this.subcategory.join(',');
      
      console.log(data);
      
      return false;
    }
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="submitBox">
  <form method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
    <select id="basic" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Select Your City" v-model="subcategory" name="subcategory[]" multiple>
      <option v-for="so in services" v-bind:value="so.name">{{so.name}}</option>  
    </select>
    <button>Submit</button>
  </form>
</div>