Vue.js 在v-for指令中使用v-model创建新的数据对象

我想通过以下方式创建一个带有v-for指令的items对象：

<v-row v-for="(item, index) in items" v-bind:key="index">
            <v-col cols="12" md="4">
              <v-autocomplete
                v-model="item.product_uid"
                :items="product_list"
                item-text="[attributes][name]"
                item-value="id"
                label="Product name"
                outlined
              ></v-autocomplete>
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="item.qty"
                label="Quantity"
                outlined
              ></v-text-field>
            </v-col>
            <v-col cols="12" md="4">
              <v-text-field
                v-model="item.net_unit_price"
                label="Unit price"
                outlined
              ></v-text-field>
            </v-col>
          </v-row>
          <v-col>
            <v-btn rounded color="primary" dark @click="addItem()">Add</v-btn>
          </v-col>

data () {
      return {
        items: [],
        product_list: [],
      }
    },
    methods: {
      addItem: function () {
        this.items.push({ product_uid: '', qty: '', net_unit_price: '',  });
      }
}

添加
数据（）{
返回{
项目：[]，
产品清单：[]，
}
},
方法：{
附加项：函数（）{
this.items.push（{product\u uid:''，qty:''，net\u unit\u price:''，}）；
}
}

如何根据从product_list对象中选择的“product name”获取“Unit price”值（product_list[属性][价格]），然后将其添加到新项目数组中

product_list对象来自服务器的http调用，我希望使用这些数据作为表单中的默认值，如果需要，更改这些值并将它们全部添加到新的item对象中

---

非常感谢你的帮助

最可能的情况是，您应该使用文档中提到的

computed

属性

您的

产品列表也为空。在获取
产品列表[属性][price]
之前，您应该在其中添加一些内容，或者借助计算属性或其他内容获得过滤结果。另外，我不明白您试图对这行代码做什么
：items=“product_list”
您试图为所有组件的
items
属性设置相同的值

很难理解您到底想做什么，但可能您还需要某种过滤方法。
如果我理解正确，您希望在从自动完成列表中选择项目时“自动完成”数量和单价。这是一个样本。假设您的api数据如下所示：

产品列表：[
{产品uid:1，名称：'name1'，数量：1，净单价：2}，
{产品uid:2，名称：'name2'，数量：2，净单价：3}，
{产品uid:3，名称：'name3'，数量：3，净单价：4}
],

然后从自动完成中删除
v-model
和
项值
，而是添加
返回对象
，这样我们就可以从自动完成中获得完整的对象以供使用。添加vuetify自动完成事件
更改
，以便我们可以传递所选对象和索引，以便我们可以将值修补到您的数组中：

模板：


@change=“setValue（索引，$event）”
>

因此，现在当从自动完成中选择一个项目时，我们调用
setValue
，并为其修补正确的值：

setValue:函数（索引，项）{
//如果您想要完整的对象，请选择您想要的道具
this.$set（this.items，索引，{…item}）
}

谢谢您的回答！我已经编辑了我的帖子以使其更易于理解。我已经对你的问题添加了一条评论，但如果我在你更改后立即理解，我仍然会回答你关于使用计算属性的问题。你正在尝试循环使用空项。然后您尝试单击“添加”，将项目推送到项目中。但您不能单击“添加”，因为您的项目为空。最有可能的情况是，您应该在产品列表上循环，而不是在项目上循环。通过“添加”按钮，我插入了用产品列表对象中的值填充的空行。我的目标是，如果我从产品列表中选择一个产品，则单价字段将使用同一产品列表对象中的匹配值进行更新。我理解这一点，但您不能循环项目并使用“添加”来添加/删除它，因为您将无法看到该列表，因为项目为空，因此无法呈现“添加”按钮。您应该循环查看产品列表。也许，我遗漏了什么。我被代码缩进弄糊涂了。我没有看到在“添加”按钮之前关闭。现在在项目上循环是有意义的。它看起来不错，非常感谢！我还不能尝试，但我想知道如果产品列表和项目对象有不同的结构，这个解决方案是否也有效？如果它们有不同的结构，没有。。。这就是我添加这两条注释的原因：
添加正确的道具
和
如果您想要完整的对象，请选择您想要的道具
，以涵盖此场景。我假设id总是唯一的，两个列表都应该有相同id的对象，即使其他道具的名称不同。但是请尝试一下，如果您遇到代码方面的特定问题，请大声说出来，我将尝试提供帮助：）因此，如果对象属性不匹配，请不要使用
this.$set（this.items，index，{…item}）
您可以这样做
this.$set（this.items，index，{product\u uid:item.myProductUidPropertyName，qty:item.myProductQtyPropertyName，net\u unit\u price:item.myUnitPricePropertyName}）
！我试试看，希望不会再打扰你；-）