在 vue.js 中创建一个包含数据的 obj 名称

Question

我刚刚创建了一个构造函数来为JSON文件创建新用户。

结构应如下所示：

{
  "users": {
    "userName1": {
      "salary": [
        "1234"
      ]
    },
    "userName2": {
      "salary": [
        "4321"
      ]
    }
  }
}

我的代码看起来像这样 atm：

export const userDataControllerMixin = {
  data() {
    return {
      userObj: {},
    };
  },
  methods: {
    NewUser(user, salary) {
      this.user = user;
      this.salary = salary;
      user = {
        salary,
      };
    },
    // GETTING INPUT FROM USERS DIALOGBOX
    getInput(inputName, inputSalary) {
      const userName = document.querySelector(inputName).value;
      const userSalary = document.querySelector(inputSalary).value;

      const userData = new this.NewUser(userName, userSalary);
      console.log(userData);
},

我得到的结构是错误的，它看起来像这样：

NewUser {user: "asd ", salary: "123"}

Answer 1

当你使用这个词时 this ，它的意思是现任父亲，在你的情况下NewUser

要以您想要的方式获取变量，您需要执行以下操作：

    NewUser(user, salary) {
      this[user] = {
        'salary':salary
      };
    },

Answer 2

在 VueJS 中不需要 querySelectors，因为输入与 v-model 绑定退房： https://v2.vuejs.org/v2/guide/forms.html

因此，我们可以将应用程序简化为一个函数，该函数读取用户名和薪水属性并将它们添加到 userObj。

我在这里做了一个工作示例：https://codepen.io/bergur/pen/agZwQL?editors=1011

new Vue({
  el: '#app',
  data() {  
    return {
      username: '',
      salary: '',
      userObj: {}
    }
  },
  methods: {
    newUser() {
      this.userObj[this.username] = {
        salary: [Number(this.salary)]
      }
      
      console.log(this.userObj)
    }
  }
})