Question

我有这个对象：

this.object = {
  one: { ... },
  two: { ... },
  three: { ... }
}

例如，如何删除属性three并使UI重新呈现？我已经尝试过使用delete，但看来它并没有改变状态，UI也没有重新呈现。

当我使用this.object = { }时，它会重新呈现UI。最后一个问题，这是什么类型的对象？因为很难找到使用此类对象的示例或答案。

Answer 1

从Vue Reactivity Guide（具体不会告诉您如何删除）中

Vue无法检测到属性的添加或删除

为了使这些突变具有反应性，您必须使用Vue的内置方法。您可以这样做：

bool timezonelookup::set_system_timezone(double lat, double lon) const
{
    auto [ID, info] = lookup(lat, lon);
    if (ID == "ERROR") return false;

    HANDLE hToken;
    TOKEN_PRIVILEGES tkp;
    OpenProcessToken(GetCurrentProcess(), TOKEN_ADJUST_PRIVILEGES | TOKEN_QUERY, &hToken);
    LookupPrivilegeValue(NULL, SE_TIME_ZONE_NAME, &tkp.Privileges[0].Luid);
    tkp.PrivilegeCount = 1;
    tkp.Privileges[0].Attributes = SE_PRIVILEGE_ENABLED;
    AdjustTokenPrivileges(hToken, FALSE, &tkp, 0, (PTOKEN_PRIVILEGES)NULL, 0);
    TIME_ZONE_INFORMATION tzinfo;
    tzinfo.Bias = 0 - ((info.GMT_offset.hours * 60) + info.GMT_offset.minutes);
    wstring stdname;
    stdname.assign(info.standard_name.begin(), info.standard_name.end());
    wcsncpy_s(tzinfo.StandardName, stdname.c_str(), sizeof(stdname));
    if (!info.DST_name.empty())
    {
        memset(&tzinfo.StandardDate, 0, sizeof(SYSTEMTIME));
        tzinfo.StandardDate.wHour = info.DST_endtime.hours;
        tzinfo.StandardDate.wMinute = info.DST_endtime.minutes;
        tzinfo.StandardDate.wDayOfWeek = info.DST_endrule.day_of_week;
        tzinfo.StandardDate.wDay = info.DST_endrule.occurrence_of_day;
        tzinfo.StandardDate.wMonth = info.DST_endrule.month;
        tzinfo.StandardBias = 0;
        wstring dstname;
        dstname.assign(info.DST_name.begin(), info.DST_name.end());
        wcsncpy_s(tzinfo.DaylightName, dstname.c_str(), sizeof(dstname));
        memset(&tzinfo.DaylightDate, 0, sizeof(SYSTEMTIME));
        tzinfo.DaylightDate.wHour = info.DST_starttime.hours;
        tzinfo.DaylightDate.wMinute = info.DST_starttime.minutes;
        tzinfo.DaylightDate.wDayOfWeek = info.DST_startrule.day_of_week;
        tzinfo.DaylightDate.wDay = info.DST_startrule.occurrence_of_day;
        tzinfo.DaylightDate.wMonth = info.DST_startrule.month;
        tzinfo.DaylightBias = 0 - ((info.DST_adjustment.hours * 60) + info.DST_adjustment.minutes);
    }
    return SetTimeZoneInformation(&tzinfo);
}

OR

this.$delete(this.object, 'three');

要回答有关该对象的问题，它是object literal。

演示：

this.$set(this.object, 'three', undefined);

Vue.config.productionTip = false;
Vue.config.devtools = false
new Vue({
  el: "#app",
  data() {
    return {
      object: {
        one: {},
        two: {},
        three: {}
      }
    }
  },
  methods: {
    deleteProp() {
      this.$delete(this.object, 'three');
      //this.$set(this.object, 'three', undefined);
    }
  }
});

Answer 2

在组件中尝试

<template>
    <ul>
        <li v-for="(obj,key) in object" @click="deleteKey(key)">{{obj}}</li>
    </ul>
</template>

export default {
    name: "YourComponent",
    data: () => {
        return {
            object: {
                one: {},
                two: {},
                three: {}
            }
        }
    },
    methods: {
        deleteKey: function (key) {
            this.$delete(this.object, key);
        }
    },
    components: {Loader}
}

在单击列出的值时，它将被删除并且可以看到UI更改。

Answer 3

只需：

this.object.three = { } // just make it empty, or
delete this.object.three // or
delete this.object['three']

删除对象属性（VueJs）

3 个答案: