Vue вычисляемые методы не могут изменять данные, используя сеттер в шаблоне

Question

Мне нужно изменить данные с помощью computed:

<template>
    <div>{{ userDataTest }}</div>
</template>

props: {
    exampleData: {
        type: Object,
        required: true,
    },
},

computed: {
    userDataTest: {
        get: function() {
            return this.exampleData;
        },
        set: function(newValue) {
            console.log(newValue);
            return newValue;
        },
    },
}

mounted () {
    setTimeout(() => {
        console.log('Change now to null!');
        this.userDataTest = null;
    }, 5000);
},

Я получаю данные с помощью реквизита, затем я создаю вычисляемые методы с помощью getter и setter. Я добавил userDataTest в <template>. И я изменяю (используя mounted) данные в this.userDataTest на ноль, используя setter. В console.log(newValue); в сеттере я вижу newValue - это null, но в <template> ничего не меняется, у меня есть данные из геттера.

Почему сеттер не меняет данные в <template> на null?

Answer 1

Мутирование опоры локально считается антишаблоном

Однако вы можете использовать модификатор .sync , как показано ниже , но вы не можете установить опору на null, потому что вы указываете, что это должен быть тип Object.

Vue.component('my-component', {
  template: `<div>{{ userDataTest }}</div>`,
  props: {
    exampleData: {
      type: Object,
      required: true
    }
  },

  computed: {
    userDataTest: {
      get: function() {
        return this.exampleData
      },
      set: function(newValue) {
        this.$emit('update:exampleData', newValue)
      }
    }
  },

  mounted() {
    setTimeout(() => {
      console.log('Change now!')
      this.userDataTest = {}
    }, 2500)
  }
})

new Vue({
  el: '#app',

  data() {
    return {
      exampleData: {
        foo: 'bar'
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <my-component :example-data.sync="exampleData"></my-component>
</div>

Answer 2

Кажется, вы пытаетесь установить значение вычисляемого свойства, возвращая новое значение, но Vue на самом деле не проверяет возвращаемое значение установщика. Возможно, вы пытались проксировать переменную data через вычисляемое свойство. Если это так, установщик должен установить эту переменную data в теле установщика.

Например, ваш компонент может объявить переменную data с именем userData, которая всегда имеет последнее значение exampleData реквизита через наблюдателя :

export default {
  props: {
    exampleData: Object
  },
  data() {
    return {
      userData: {}
    }
  },
  watch: {
    exampleData(exampleData) {
      this.userData = exampleData
    }
  },
}

Тогда ваш шаблон и вычисленная реквизит будут использовать userData вместо:

<template>
  <div>{{ userData }}</div>
</template>

<script>
export default {
  //...
  computed: {
    userDataTest: {
      get() {
        return this.userData
      },
      set(newValue) {
        this.userData = newValue
      }
    }
  }
}
</script>