javascript - Vue.js 方法中的对象分配

Question

我有一个 Vue 组件，我在其中从对象数组中选择一个特定值，然后尝试将该值中的一些字段复制到 Vue 数据中

  <div class="container">
    <h4>Add Item</h4>
    <form @submit.prevent="addItem(item.Code)">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label for="ItemCode">Code</label>&nbsp;
            <select
              id="ItemCode"
              v-model="item.Code"
            >
              <input
                v-model="item.Code"
                type="hidden"
              >
              <option
                v-for="part in PartCodes"
                :key="part"
              >
                {{ part }}
              </option>
            </select>
   .
   .
   .
    </form>
  </div>

数据在哪里

  data() {
    return {
      item: {},
      parts: [],
    };
  },
  computed: {
    PartCodes: function () {
      return [...new Set(this.parts.map(p => p.Code))];
    },
  },
  created() {
    let uri = '/parts';
    if (process.env.NODE_ENV !== 'production') {
      uri = 'http://localhost:4000/parts';
    }
    this.axios.get(uri).then(response => {
      this.parts = response.data;
    });
  },
  methods: {
    addItem(selectCode) {
      let uri = '/items/create';
      if (process.env.NODE_ENV !== 'production') {
        uri = 'http://localhost:4000/items/create';
      }
      let selectPart = this.parts.filter( obj => {
        return obj.Code === selectCode;
      });

      this.item.Description = selectPart.Description;
      this.item.Cost = selectPart.Cost;
      this.item.Price = selectPart.Price);

      this.axios.post(uri, this.item)
        .then(() => {
          this.$router.push({name: 'QuoteIndex'});
        });
    }
  }
};

当我记录对象“selectPart”时，它具有正确的字段，但将这些字段分配给对象“items”会导致“未定义”值

我一定是在作用域上做错了，但我不知道哪里出了问题。

请建议我如何使用此组件复制字段

谢谢

Answer 1

在 Vue 2.x 中，properties added to objects are not reactive .您已经声明了没有属性 Description 和 Price 的 item 数据项，并且稍后使用简单的对象分配分配了这些属性，Vue 不会这样做能够追踪。

有两种方法可以解决这个问题:

1. Declare all reactive properties upfront

将数据更改为

data() {
    return {
      item: {
        Description: null,
        Price: null
      },
      parts: [],
    };
  },

2. Use Vue.set()

改变

this.item.Description = selectPart.Description;
this.item.Price = selectPart.Price;

到

this.$set(this.item, 'Description', selectPart.Description);
this.$set(this.item, 'Price', selectPart.Price);

谢天谢地in Vue 3.x this caveat will be eliminated所有添加到响应式对象的属性本身都会变成响应式。