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中，由于输入是通过v-model绑定的，因此不需要querySelector 检出：https://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)
    }
  }
})

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

2 个答案: