theUnforgiven
336
16
Vue

JSON into a v-for select dropdown [HELP]

Posted 2 months ago by theUnforgiven

I have the following from a JSON get request:

units:Array[1]
0:"{"id":1,"unit_no":"1","floor":"1","landlord":"hghg","landlord_email":"[email protected]","agent":null,"agent_email":null},{"id":2,"unit_no":"2","floor":"1","landlord":"hghg","landlord_email":"[email protected]","agent":null,"agent_email":null},{"id":3,"unit_no":"3"....

I now want to add the unit_no and floor in a v-for loop within a select.

But the following doesn't work

<select v-model="unitSelection" class="form-control">
      <option>Please select</option>             
      <option v-for="unit in units" :value="unit.id" :key="unit.id">
              {{ unit.unit_no }} ({{ unit.floor }})
      </option>
</select>

I have a select before this which then triggers this select I'm talking about, the method for that is as follows:

getBlocks(event) {
                axios.get('/block/api/getByBlock/' + this.block)
                    .then((response) => {
                        let str = response.data.payload;
                        let payload = JSON.parse(JSON.stringify(str.replace(/[[\]]/g,'')));

                        console.log(payload);
                        this.units.push(payload);
                    });
            },

Where am I going wrong?

Please sign in or create an account to participate in this conversation.