Question

我正在使用键和JSON数据在数据库中存储一些设置，但是当我从Laravel API获取这些设置时，它将返回一个数组，这将成为将数据重新分配给输入字段的繁琐工作。我想知道是否有更简单的方法。

到目前为止，我已经尝试过迭代并使用switch语句来标识键并重新分配它们。但是问题是我无法在循环中访问VueJS数据变量。

这里是看数据库表： Database Table

以下是我在Vue中使用的对象：

    helpful_notification: {
        email: false,
        sms: false,
        push: false,
    },
    updates_newsletter: {

          email: false,
          sms: false,
          push: false,

    },

这是我的代码以遍历结果：

   axios.get('/api/notificationsettings')
      .then(response => {
          var data = response.data;
          let list = [];
          console.log(data)
          $.each(data, function(i, j){
            switch(j.key){
              case 'transactional': 

                  var settings = JSON.parse(j.settings)
                  var x = {
                  transactional : settings
                }
                list.push(x)
              break;
              case 'task_reminder': 
                 var settings = JSON.parse(j.settings)
                  x = {
                  task_reminder : settings
                }
                list.push(x)
                break; 
            }
          });
          this.transactional = list;
          // this.task_reminder= list.task_reminder;
          console.log(list);
      })
      .catch(error => {

      });

Answer 1

在JavaScript中，functions有自己的scope，除了少数例外。也就是说，在您的匿名函数中（即：

 $.each(data, function(i, j){
   // this here is the function scope, not the outside scope
 })

...），this不是外部作用域，它是函数的作用域

有两种方法可以使外部作用域在函数内部可用：

a）将其放在变量中

 const _this = this;
 $.each(data, function(i, j){
   // this is function scope, 
   // _this is outside scope (i.e: _this.list.task_reminder)
 })

b）使用arrow function

$.each(data, (i, j) => {
   // this is the outside scope
   // the arrow function doesn't have a scope. 
})

以上内容是为了帮助您访问函数内部范围的简化。但是this可能会因使用的上下文而异。您可以阅读有关this here的更多信息。

如何在VueJS中遍历JSON？

1 个答案: