Блог

Я сохраняю некоторые настройки в базе данных с ключами и данными JSON, но когда я получаю эти настройки из Laravel API, он возвращает массив, который становится напряженной работой по переназначению данных в поля ввода. Я хочу знать, есть ли более простой способ сделать это.

До сих пор я пытался выполнять итерации и использовать оператор switch для идентификации ключей и их переназначения. Но проблема в том, что я не могу получить доступ к переменной данных VueJS в цикле.

Вот посмотрите на таблицу базы данных: Таблица базы данных

Вот объекты, которые я использую в 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 => {

      });
  

В JavaScript функции имеют свою собственную область действия, за исключением нескольких исключений. Это означает, что внутри вашей анонимной функции (т. е:

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

…), this не является внешней областью, это область функции

Есть два способа сделать внешнюю область доступной внутри вашей функции:

а) поместите его в переменную

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

б) используйте функцию со стрелкой

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

Вышесказанное является упрощением, направленным на то, чтобы помочь вам получить доступ к внешней области внутри вашей функции. Но this может отличаться в зависимости от контекста, в котором он используется. Вы можете прочитать больше о this здесь.