Nested Lists?

[cipriano200]

Trying to figured out how to update a nested list:

          const { div, a, p, button, span, i, input, textarea, ul, ol, li } =
               van.tags;

           var MyForm = () => {
               var name = van.state("");
               var persons = van.state([
                   {
                       name: "Harry",
                       cities: ["NewYork", "Paris"],
                   },
                   {
                       name: "David",
                       cities: ["Berlin"],
                   },
                   {
                       name: "John",
                       cities: ["London"],
                   },
               ]);

               return span(
                   ul(() =>
                       div(
                           persons.val.map((person) =>
                               li(
                                   person.name,
                                   ol(
   									person.cities.map((city) =>
   										li(
   											{
   												onclick: function (e) {
   													console.log(city);
   													city = 'Test';
   												},	
   											},
   											city												
   										)
   									)
   								)
                               )
                           )
                       )
                   )
               );
           };

           van.add(document.body, MyForm());

On the second iteration person.cities.map i try setting city = 'Test'; but is not updating

Any thoughts?

[Tao-VanJS]

city = 'Test' only sets the value for the function parameter city. It doesn't change the value of any State object.

[Tao-VanJS]

For your application, vanX.list is probably the closest feature you're looking for.

[cipriano200]

Thank you