在 Vue3 上查看属性答案

【问题标题】：Watch property on Vue3在 Vue3 上查看属性
【发布时间】：2021-10-26 21:03:35
【问题描述】：

我有一个正在编辑的表单，我使用 created 方法从 api 调用中预填充该表单信息，一切正常。

但是我想查看表单中的字段，如果它们被编辑，我想将变量“isFormEdited”设置为 true。

我是这样设置的。

   watch: {
  'form': {
    handler: function(v) {
      console.log('form changed')
    //here i would set the "isFormEdited" variable to be true. 
    },
    deep: true
  },

我的问题是控制台日志在页面加载时立即发生，因为表单从空开始，然后创建的函数使用 api 调用填充值。

如何解决这个问题，以便只有在实际手动更改表单时才能将“isFormEdited”值设置为 true？

created() {


      const getForm = axios.get(`api/dashboard/form/${this.$route.params.id}/edit`);
      const getFormTypes = axios.get('api/dashboard/form/types');

      axios.all([getForm, getFormTypes])
          .then(
              axios.spread((...responses) => {
                  // console.log(responses[0].data);
                  this.form = responses[0].data;

                  if(!this.form.type_id) this.form.type_id = ""; //Set Blank if null

                  this.form.fields.map((field) => {
                     // console.log(field);
                     if(field.options){ field.options = JSON.parse(field.options); }
                     if(field.mime_types_allowed){  field.mime_types_allowed = JSON.parse(field.mime_types_allowed); }
                     return field;
                  });

                  //get form types
                  this.types = responses[1].data.data;
              })
          )
          .catch(errors => {
              alert("Error");
              console.log(errors);
      });

提前谢谢你。

【问题讨论】：

标签： javascript vue.js components vuejs3 watch

【解决方案1】：

您可以创建一个额外的变量dataLoaded，将其默认设置为 false，并在填写表单后将其更改为 true。然后在您的watch 处理程序中，只有当dataLoaded 也为真时，您才将isFormEdited 设置为真。

例子：

export default {
    data() {
        return {
            dataLoaded: false,
            isFormEdited: false,
        };
    },
    created() {
        const getForm = axios.get(`api/dashboard/form/${this.$route.params.id}/edit`);
        const getFormTypes = axios.get('api/dashboard/form/types');

        axios
            .all([getForm, getFormTypes])
            .then(
                axios.spread((...responses) => {
                    // console.log(responses[0].data);
                    this.form = responses[0].data;

                    if (!this.form.type_id) this.form.type_id = ''; //Set Blank if null

                    this.form.fields.map((field) => {
                        // console.log(field);
                        if (field.options) {
                            field.options = JSON.parse(field.options);
                        }
                        if (field.mime_types_allowed) {
                            field.mime_types_allowed = JSON.parse(field.mime_types_allowed);
                        }
                        return field;
                    });

                    //get form types
                    this.types = responses[1].data.data;

                    this.dataLoaded = true;
                })
            )
            .catch((errors) => {
                alert('Error');
                console.log(errors);
            });
    },
    watch: {
        form: {
            handler: function (v) {
                if (this.dataLoaded) {
                    console.log('Form changed!');
                    this.isFormEdited = true;
                }
            },
            deep: true,
        },
    },
};

如果这不是一个选项，您可以使用实例的 $watch 方法在组件中的任何位置开始观察数据元素。

【讨论】：