如何在vue js中用逗号分隔的字符串中发布子类别?

时间:2017-12-20 15:59:58

标签: javascript jquery vue.js vuejs2 vue-component

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

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

有人可以帮我解决一下吗?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

如果您只需要将subcategory数组加入由逗号,分隔的字符串中,只需使用:

data['subcategory'] = this.subcategory.join(',');

也许您会发现将jQuery ajax调用的数据用作以下内容非常有用:

data: {"subcategory": this.subcategory}