How to set attributes of computed in vue

In Vue, computed is a very powerful feature that allows us to derive some new property values ​​by calculating properties. In most cases, the computed property is used to calculate some value rather than modify the value. However, in some special cases, we may need to set the computed property to a new value. So, in Vue, how can the computed property be set? Next, this article will answer them one by one for you.

1. Basic usage of computed attribute

Let’s first look at the basic usage of computed attribute. The computed attribute is actually an attribute with get and set methods. Among them, the get method is used to calculate the value of the attribute, and the set method is used to set the value of the attribute. Here is an example:

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    set: function(newValue) {
      var names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

In the above code, we define a calculated property fullName, whose value is a combination of firstName and lastName. In the get method, we calculate the value of fullName by concatenating firstName and lastName. In the set method, we modify the original attribute value by splitting the new fullName value into firstName and lastName and then setting their values ​​at the same time.

2. Notes on the set method of the computed attribute

Although the set method of the computed attribute seems useful, it also has some things to pay attention to. The more important points are the following:

1. Since the computed attribute is basically read-only, when setting the attribute, you need to ensure that the set value will not affect other places.
2. Since the computed attribute itself does not store a value, when setting the attribute, you need to ensure that the set value is correct the next time you get it.

3. Practical application examples

Below we use actual application examples to demonstrate how to set the computed attribute.

First, we define a component with a calculated attribute totalPrice, whose value is the product price multiplied by the product quantity, that is, totalPrice = price * quantity. We can use the following code to implement this calculated property:

<template>
  <div>
    <p>单价：{{ price }}</p>
    <p>数量：<input v-model="quantity"></p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        quantity: 2
      }
    },
    computed: {
      totalPrice: {
        get() {
          return this.price * this.quantity
        },
        set(newValue) {
          this.quantity = newValue / this.price
        }
      }
    }
  }
</script>

In the above code, we first define a component that contains a calculated property totalPrice. In the get method, we use price and quantity to calculate the total value; in the set method, we use newValue and price to calculate the new quantity value, and then update the data to update the DOM.

Now, if we want to set the total price, rather than the quantity or price, we can do this:

this.totalPrice = 20;

This will automatically modify the value of quantity so that the total price is equal to 20. If we want the unit price multiplied by the quantity to equal the total price, rather than automatically allocating the quantity when the total price is set, we can modify the logic in the set method as follows:

set(newValue) {
  this.price = newValue / this.quantity
}

In this way, we can pass Set the total price to modify the unit price value.

In general, the computed attribute is indeed a very powerful feature, but there are many things that need to be paid attention to. In actual use, we need to use the set method of computed attributes carefully according to the situation to avoid unnecessary problems.

The above is the detailed content of How to set attributes of computed in vue. For more information, please follow other related articles on the PHP Chinese website!