javascript - Vue.js 在单击列表时更改附加到表单的模型

Question

我有一个对象数组。这些对象被加载到 vue.js 中的列表中。除了这个列表之外，我还有一个表单显示来自这些对象之一的数据。我想，当单击列表的某个元素时，它将将此特定对象绑定(bind)到表单并显示其数据。

如何在 Vue.js 中做到这一点？

我的列表代码是:

<div id="app-7">

                <ul id="food-list" v-cloak>
                    <food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.id" inline-template>
                        <li class="food">
                            <div class="food-header">
                                <img :src="'img/' + food.slug +'.png'">
                                <div class="food-title">
                                    <p>{{food.name}} |
                                        <b>{{food.slug}}</b>
                                    </p>
                                    <p>quantity: {{food.quantity}}</p>
                                </div>
                                <div class="food-load"> // load into form upon clicking this
                                </div>
                            </div>
                        </li>
                    </food-item>
                </ul>

</div>

Answer 1

由于我没有表单的代码，因此这是我的最佳猜测，无需澄清。

您可以向要单击的项目添加一个click 处理程序。它将把食品的值传递给该方法。

<div class="food-load" @click="setFoodItem(item)">
</div>

当调用该方法时，它可以将单击的项目分配给数据属性。我不确定您的表单在哪里，以及它是否位于不同的组件中。如果它在子组件中，您必须将其作为 prop 传入，或者发出一个事件以将其传递给父组件。

data() {
    return {
        //create a reactive field to store the current object for the form.
        foodItemForm: null
    };
},
methods: {
    //method for setting the current item for the form.
    setFoodItem(item) {
        this.foodItemForm = item;
    }
}