CODEWITHSUNDEEP
vue.jsvue-componentjsx
Has
Has

Reputation: 41

Grab value from Array JS vue

Could anyone point me in the right direction where i can read about the solution. It works fine in console and lost for ideas at this point.

Promise.all([
    DishSource.getDishDetails(523145),
    DishSource.getDishDetails(787321),
    DishSource.getDishDetails(452179),
]).then((values) =>
    Vue.render(
        <SidebarView guests={5} dishes={values} />,
        document.getElementById("app")
    )
);

SidebarView :

<table>
    {props.dishes.values.map((e) => (
        <tr>
            <td>
                <button> x </button>
            </td>
            <td>{e.title}</td>
            <td>{e.dishType}</td>
            <td>{e.dishPrice}</td>
        </tr>
    ))}
</table>

Error msg + console logs

Upvotes: 4

Views: 57

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

At the first rendering dishes property is not available, so you should add some conditional rendering :

{props.dishes && props.dishes.values.map(e => ...

Upvotes: 1

Related Questions