单击列表时更改附加到表单的Vue.js模型
单击列表时更改附加到表单的Vue.js模型
提问于 2017-12-15 01:09:50
我有一个对象数组。这些对象被加载到vue.js中的列表中。除了这个列表之外，我还有一个显示来自这些对象之一的数据的表单。我希望，当单击列表的某个元素时，它会将此特定对象绑定到表单并显示其数据。
如何在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>回答 2
Stack Overflow用户
发布于 2017-12-15 02:07:47
由于我没有表单的代码，这是我在没有澄清的情况下最好的猜测。
您可以向要单击的项添加click处理程序。它会将食品项的值传递给该方法。
<div class="food-load" @click="setFoodItem(item)">
</div>当调用该方法时，它可以将单击的项分配给数据属性。我不确定您的窗体在哪里，以及它是否在不同的组件中。如果它在子组件中，则必须将其作为道具传递，或者发出事件将其传递给父组件。
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;
}
}Stack Overflow用户
发布于 2017-12-15 02:30:16
在您的示例代码中缺少了相当多的信息，查看您的脚本非常重要，以了解您希望完成的任务以及可能出现问题的地方。
下面是我在代码中遇到的问题的快速列表：
- v-for将单个食品项引用为' item '，在循环中，您试图访问属性时，不要将代码包装在组件中，除非您正在导入组件
- 当绑定一个值到'v-bind:src' (或缩写为':src')时，只传递url。您应该在脚本中指定这一点，而不是单击，最好使用按钮和'v-on:click' (或速记为‘@
’)将所选食物项目加载到表单
- 中您还应该包括Javascript
无论如何，以下是我将如何处理这件事(冒失地填写了一些空白)：
<template>
<div id="app">
<ul id="food-list">
<!--<food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.id" inline-template>-->
<li v-for="item in foodList" class="food">
<div class="food-header">
<img :src="item.slug" v-bind:alt="item.slug" width="250px" height="auto">
<div class="food-title">
<p>{{item.name}} | <b>{{item.slug}}</b></p>
<p>quantity: {{item.quantity}}</p>
</div>
<button class="food-load" @click="loadFoodItem(item.id)">Load Food Item</button>
</div>
</li>
<!--</food-item>-->
</ul>
<form v-if="activeFoodId != null" id="foodItemForm" action="#">
<h3>Food Form</h3>
<label for="food-id">Id:</label>
<input id="food-id" type="number" v-bind:value="foodList[activeFoodId].id"><br/>
<label for="food-slug">Slug:</label>
<input id="food-slug" type="text" v-bind:value="foodList[activeFoodId].slug"><br/>
<label for="food-name">Name:</label>
<input id="food-name" type="text" v-bind:value="foodList[activeFoodId].name"><br/>
<label for="food-quantity">Quantity:</label>
<input id="food-quantity" type="number" v-bind:value="foodList[activeFoodId].quantity">
</form>
</div>
</template>
<script>
export default {
name: 'app',
data: function () {
return {
activeFoodId: null,
foodList: [
{
id: 1,
slug: 'http://3.bp.blogspot.com/-QiJCtE3yeOA/TWHfElpIbkI/AAAAAAAAADE/Xv6osICLe6E/s320/tomato.jpeg',
name: 'tomatoes',
quantity: 4
}, {
id: 2,
slug: 'https://img.purch.com/rc/300x200/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA2NS8xNDkvb3JpZ2luYWwvYmFuYW5hcy5qcGc=',
name: 'bananas',
quantity: 12
}, {
id: 3,
slug: 'https://media.gettyimages.com/photos/red-apples-picture-id186823339?b=1&k=6&m=186823339&s=612x612&w=0&h=HwKqE1MrsWrofYe7FvaevMnSB89FKbMjT-G1E_1HpEw=',
name: 'apples',
quantity: 7
}
]
}
},
methods: {
loadFoodItem: function (foodItemId) {
console.log(foodItemId)
this.activeFoodId = foodItemId
}
}
}
</script>
<style>
/# Irrelevant #/
</style>希望它能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47818748
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号