I am attempting to create a v-for loop using properties from another class in order to utilize it across multiple components.
The HTML code for Now.vue:
<tr v-for="(el, index) in rendering.elements" :key="index">
<td>{{index + 1}}</td>
<td>{{el.name}}</td>
</tr>
The TypeScript code for Now.vue:
@Component
export default class Now extends Vue {
@Prop() private rendering: Render = new Render();
/**
* On vue created
*/
public created () : void
{
ApiClient.executeRequest('GET', '/api/stock/state')
.subscribe((response: any): void => {
this.rendering.elements = response.data.result;
})
}
}
Although the rendering.elements are correctly set with the values, the v-for loop does not update.
This code snippet resolves the issue:
<tr v-for="(el, index) in elements" :key="index">
<td>{{index + 1}}</td>
<td>{{el.name}}</td>
</tr>
@Component
export default class Now extends Vue {
@Prop() private elements: Array<any> = [];
/**
* On vue created
*/
public created () : void
{
ApiClient.executeRequest('GET', '/api/stock/state')
.subscribe((response: any): void => {
this.elements = response.data.result;
})
}
}
Why is this happening?