How to display in v-for by line - data variable?

Question

Vue.js

I accept props as a string in the component, I start displaying in the v-for=" item in 'string' " directive, the names of the props that I accept exactly the same as in the data object of this component, but as a result, the number of letters of this string is displayed, and not the array items which lies in data, how to solve this problem? ((
Demo: https://codepen.io/Metis/pen/KembaK?editors=1010

Answer 1

I can offer a couple of options.
1. Let the data of the component become the properties of the object, then they can be obtained by the name of the property. Like so .
2. Make a computed property that will represent the current dataset. Like so .
...
Oh, and of course the this keyword - it is also available in the template. So there is a third option (well, actually this is the "one and a half" option - there are essentially no differences from the first).
UPD. Of course, all three of these options are the same thing - getting the property of an object by name in a variable. That is, ultimately, the problem is in poor knowledge of the language. If I were you, I would tighten up the basics, otherwise you will run around here with such trivial questions.