logo标签列表

如何在JavaScript中替换或更新数组项

javascriptarraysvue.jsvuejs2
4

标题描述了我的需求，以下是代码：

如果 items 中不存在商品（通过 id 区分），添加商品时一切正常。但如果已存在，则仅修改该商品。每个商品在 items 数组中都有一个唯一的 id。

例如：如果第一个商品的 id 为 1，数量为 3，下一个商品的 id 也为 1，数量为 3，我希望更新 items 中该商品的数量。

new Vue({
  el: '#fact',
  data: {
    input: {
      id: null,
      qty: 1
    },
    items: []
  },
  methods: {
    addItem() {
      var item = {
        id: this.input.id,
        qty: this.input.qty
      };
      
      if(index = this.itemExists(item) !== false)
      {
          this.items.slice(index, 1, item);
          return null;
      }
      
      this.items.push(item)
    },
    itemExists($input){
       for (var i = 0, c = this.items.length; i < c; i++) {
           if (this.items[i].id == $input.id) {
               return i;
          }
       }
       return false;
    }
  }
})
<Doctype html>
  <html>

  <head>
    <meta charset="utf-8" />
    <title>Add product</title>
  </head>

  <body>
    <div id="fact">
      <p>
        <input type="text" v-model="input.id" placeholder="id of product" />
      </p>
      <p>
        <input type="text" v-model="input.qty" placeholder="quantity of product" />
      </p>
      <button @click="addItem">Add</button>

      <ul v-if="items.length > 0">
        <li v-for="item in items">{{ item.qty + ' ' + item.id }}</li>
      </ul>
      
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
  </body>

  </html>

2个回答
6

您可能误用了slice方法，将slice更改为splice 对我很有用:

this.items.splice(index, 1, item)
slice 方法根据文档，不会触发视图更新。
Vue 包装了观察数组的变异方法，以便它们也能触发视图更新。被包装的方法有：
- push() - pop() - shift() - unshift() - splice() - sort() - reverse()
谢谢您的评论！但是即使进行修改，他这次也添加了相关项目。但是我想要已经添加到items中的item被更改！ - Goms
通过使用 splice(index, 1, item)，您可以用新项目替换原始项目。如果您有其他字段，您可能会使用 Object.assign 创建一个合并到原始项目中的新项目，然后将其替换。类似于：splice(index, 1, Object.assign({}, this.items[index], item))。 - Psidom
直接在原地修改项目不是一个好主意，因为Vue无法检测到您所做的更改。请参阅Caveates。 - Psidom
感谢您的帮助！在检查了一下为什么不起作用后，我发现 if(index = this.itemExists(item) !== false) 应该是 (index = this.itemExists(item)) !== false)。使用相同的代码，当然包括您提到的备注（splice 而不是 slice），现在一切都正常了！谢谢！ - Goms
-1
if(index = this.itemExists(item) !== false)
{
    for (let value of this.items) {
        if(value.id === item.id) {
            value.qty = item.qty;
        }
     }

     return null;
 }
区别在于项目的ID（item.id），你认为这真的会对我有帮助吗？ - Goms
2
虽然这段代码片段可能解决了问题，但包括一些解释真的有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而那些人可能不知道您提供代码建议的原因。 - Alper t. Turker
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接