Question

我想通过使用Vue Form和Axios从API检索所有数据。但现在无法检索。也许我错过了一些东西。在这种情况下，我要检索汽车品牌，当在另一个选择选项中选择一个品牌时，它将基于所选品牌更改系列列表。需要您的帮助。

这是vue.js的代码

<div class="form-group">
  <label>Merek</label>
  <select class="select-dropdown-no-search form-control" v-model="merk" @change="listSeri()" name="merek" id="merek">
<option value="">--Pilih--</option>
<option v-for='data in merks' :value='data.MerkId'>{{ data.MerkName }}</option>
</select>
</div>

<div class="col-sm-6">
  <div class="form-group">
    <label>Seri</label>
    <select class="select-dropdown-no-search form-control" v-model="seri" @change="listSilinder()" name="seri" id="seri">
<option value="">--Pilih--</option>
<option v-for='data in series' :value='data.MerkId'>{{ data.MerkName }}</option>
</select>
  </div>
</div>

这是vue.js的代码

import axios from 'axios';
import API from '../API';

var urlAddStock = API.url.host + '/addstock';
var urlMerkList = API.url.host + '/merk';
var urlSeriList = API.url.host + '/seri';
var urlSilinderList = API.url.host + '/silinder';
var urlTipeList = API.url.host + '/tipe';

//Vue.component('v-select', VueSelect.VueSelect);
var inputMobile = {
  init: function() {
    this.vueConfig();
    API.auth();
  },
  vueConfig: function() {
    var app = new Vue({
      el: '#app',
      data: {
        stockSubmit: false,

        merk: "",
        merks: [],

        seri: "",
        series: [],
        access_token: ""
      },
      methods: {
        submitStock: function() {
          let self = this;
          this.stockSubmit = true;
          axios({
            method: 'post',
            url: urlAddStock,
            data: {
              MerkId: this.merk,
              merk: "",
              SeriId: this.seri,
              seri: "",

              access_token: localStorage.getItem("token")
            }
          }).then(res => {
            console.log(res.data);

            if (res.data.message === "Berhasil Menambahkan Data") {
              self.stockSubmit = false;
            } else {
              self.stockSubmit = false;
            }

          }, err => {
            console.log(err);
            self.stockSubmit = false;
          });
        },
        listMerk: function() {
          let self = this;
          axios({
            method: 'post',
            url: urlMerkList,
            data: {
              itemid: 6,
              access_token: localStorage.getItem("token")
            }
          }).then(response => {
            console.log(response.data);
            if (response.data.message === "Berhasil Mengambil Data Merk") {
              this.merks = response.data;

            }

          }, err => {
            console.log(err);

          });

        },
        listSeri: function() {
          let self = this;
          axios({
            method: 'post',
            url: urlSeriList,
            data: {
              merkid: this.merk,
              access_token: localStorage.getItem("token")
            }
          }).then(res => {
            console.log(res.data);
            if (res.data.message === "Berhasil Mengambil Data Seri") {
              this.series = response.data;
            }

          }, err => {
            console.log(err);

          });

        }
      }
    })
  }
}

Answer 1

您需要在this.series中分配新的数组引用。尝试更改此内容：

if(res.data.message === "Berhasil Mengambil Data Seri"){
  // assign new array reference using 'spread operator'
  this.series = [...response.data];
}

检索所有数据以选择选项列表

1 个答案: