I have an array "rows" which is in another array called "tabs". In the rows I trying fetch the "description" according to the selected "decorData". The "decorData" is also coming without any error using dependent dropdown according to the "selectedHouseType". So how do I fetch the data of description according the selected "decorData"

template code is --

 <div v-for="(tab, tabIndex) in tabs" :key="tab.id">
  <div >
    <select v-model="tab.selectedHouseType"
      @change="getDecor()">
      <option
        v-for="houseType in houseTypes" :key="houseType.id" :value="houseType.id">
        {{ houseType.name }}
      </option>
    </select>
    <button  @click="addTab">
      <i ></i>
    </button>
    <button v-if="tabIndex > 0" @click="removeTab(tabIndex, tab)"><i ></i>
    </button>
  </div>
  <div v-for="(row, rowIndex) in tab.rows" :key="row.id">
    <table >
      <thead>
        <th>DecorationType</th>
        <th>Description</th>
      </thead>
      <tbody>
        <td>
          <select v-model="row.selectedDecor" @change="getDescription(rowIndex)">
        <option selected v-for="decorType in tab.decorTypes" :key="decorType.id" :value="decorType.id">

              {{ decorType.name }}
            </option>
          </select>
        </td>
<td>
  <input type="text" v-model="row.selectedDes"/>
</td>
</tbody>
</table>
</div>

the data from script is--

 data() {
    return {
      tabs: [{
          selectedHouseType: "",
          decorTypes: {},
          rows: [{
              selectedDecor: "",
              selectedDes: "",
              selectedQty: "",
              selectedRate: "",
              line_total: 0,
              descriptions: {},
            }],
        }],
      
    };
  },

the method for getting the decorType which is working correctly--

getHouseTypes() {
      axios.get("/api/houseTypes").then((response) => {
        this.houseTypes = response.data;
      });
    },
getDecor() {
      axios
        .get("/api/decorTypes", {
          params: {
            houseAreaTypeId: this.tabs[this.tabs.length - 1].selectedHouseType,
          },
        })
        .then(
          function (response) {
            console.log(response.data);
            this.tabs[this.tabs.length - 1].decorTypes = response.data;
          }.bind(this)
        );
    },
mounted() {
    this.getHouseTypes();
  },

And the method for getting the "description" which is not working --

getDescription(tabIndex) {
      axios
        .get("/api/description", {
          params: {
            id: this.tabs[tabIndex].rows.selectedDecor,
          },
        })
        .then(
          function (response) {
            console.log(response.data);
           this.[this.tabs.length - 1].rows.descriptions = response.data;     
          }.bind(this)
        );
    },

Please help me get the data of "description". I think the problem is in the "params" of "getDescription" method.

CodePudding user response：

You forgot to pass the rowIndex at @change event. And to identify the row at get params.

Changes to make it work:

<select v-model="row.selectedDecor" @change="getDescription(tabIndex, rowIndex)">

getDescription(tabIndex, rowIndex) {
      axios
        .get("/api/description", {
          params: {
            id: this.tabs[tabIndex].rows[rowIndex].selectedDecor,
          },
        })
        .then(
          function (response) {
            console.log(response.data);
           this.tabs[tabIndex].rows[rowIndex].descriptions = response.data;     
          }.bind(this)
        );
    },

ps.: next time it´s helpful to post the main parts of the stack trace error if any