Cannot read property 'property_name' of undefined - vue.js

Question

This is my code right now: https://jsfiddle.net/5phq111c/5/
Html Part
<tbody v-for="row in rows" :key="row.product_id">
<tr>
<td>
<select #change="selected" v-model="row.product_id" class="form-control" name="product_id" id="product_id">
<option value="">Select Product</option>
<option v-for="item in items" :value="item.id" v-text="item.product_name"></option>
</select>
</td>
<td>
<textarea type="text" v-model="product.product_details" name="product_details" id="product_details" class="form-control" rows="1" placeholder="Product Details">
</textarea>
</td>
<td>
<input v-model.number="product.product_sellPrice" type="number" step="any" class="form-control" name="rate" id="rate" placeholder="Rate">
</td>
</tr>
</tbody>
Vue JS Part
export default {
data() {
return {
rows: [{
product_id: '',
product_details: '',
product_sellPrice: '',
}],
}
},
methods: {
addrow: function (event) {
event.preventDefault();
this.rows.push({
product_id: '',
product_details: '',
product_sellPrice: '',
});
},
selected(e) {
var id = this.row.product_id;
console.log(id);
axios.get('/estimate/product/' + id)
.then((response)=>{
this.product = '';
this.product = response.data;
})
.catch((error) => {
console.log(error);
});
}
}
I want to get the selected product_id and send an axios request to get the values of the the selected product. I have bind the product_id with the row. I am getting the selected value in the rows object but when I am sending the request by row.product_id i am getting the error can't read property 'product_id' of undefined. Where is the problem?

Answer 1

You don't define a row data property, but a rows data property array. Calling the selected method from inside a v-for loop will not automatically assign this.row a value.
If you want the product_id of the selected row in the selected method, pass it in the template via #change="selected(row.product_id)".
Then just reference that parameter in your selected method:
selected(id){
console.log(id);
axios.get('/estimate/product/' + id)
...
}

Answer 2

You seem to declare rows as an array with exactly one object in it:
data() {
return {
rows: [{
product_id: '',
product_details: '',
product_sellPrice: '',
}],
But you try to access it just like a regular object:
var id = this.row.product_id;
In addition, you declare it as rows, but access it as row (missing plural s).
To get it running, first decide whether you want to name it rows or row and adapt the usage accordingly. Second, decide if rows must be an array (should it hold multiple objects?) or not.
If it should be an array, you probably want to access it like this:
var id = this.rows[0].product_id;
If it should not be an array, declare it like this:
data() {
return {
rows: {
product_id: '',
product_details: '',
product_sellPrice: '',
},