Как назначить переменную в обратном вызове?

Question

У меня возникли проблемы с назначением dat.id, который я получаю при обратном вызове моей переменной AccuprobeID, которую я использую, чтобы сделать еще один вызов API позже. Любая помощь будет оценена. Я попытался изменить sap.deviceInfo(callback) на sap.deviceInfo().then(res=>{}), но это не сработало: /

<template>
  <div class="home">
        <b-button v-if="!claimCode.length>0" @click="createClaim">claim</b-button>
        <div v-if="claimCode.length>0 && !claimCodeSet">
          <p>Please Switch Network to Photon </p>
           <b-button variant="primary"  @click="addClaim(claimCode)">Add Claim Code to Accuprobe</b-button>
        </div>
        <div v-if="claimCodeSet">
            Please Switch Back to Normal Network
            <b-button @click="claimDeviceToProduct">Claim to Account</b-button>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
var SoftAPSetup = require('softap-setup');
var sap = new SoftAPSetup();
 var Particle = require('particle-api-js');
var particle = new Particle();
var token;
export default {
  data(){
    return{
      claimCode:'',
      claimCodeSet:false,
      AccuprobeID:''
    }
  },
  name: 'home',
  components: {
  },
  methods:{
    createClaim(){
      axios.post('https://api.particle.io/v1/products/2121/device_claims/?access_token='+this.$store.state.user.PToken)
      .then((res)=>{
        console.log(res)
        this.claimCode=res.data.claim_code
        console.log(this.claimCode)})
    },
    addClaim(claimCode,AccuprobeID){ 
      sap.deviceInfo(callback);
      function callback(err, dat) {
        if (err) { throw err; }
        console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
         AccuprobeID=dat.id
         return AccuprobeID
      };
        sap.setClaimCode(claimCode,callback);
        function callback(err, dat) {
          if(err) { throw err; }
          }
          this.claimCodeSet=true
        },
      claimDeviceToProduct(AccuprobeID){
        console.log(AccuprobeID)
        particle.addDeviceToProduct({product:'2121', deviceId: AccuprobeID, auth: this.$store.state.user.Bear }).then(function(data) {
          console.log('device claim data:', data);
        }, function(err) {
          console.log('device claim err:', err);
        });
      },
  }}
</script>

Answer 1

Vue Доступ к локальным данным с помощью this.data_name

вам нужна новая переменная ref, равная this снаружи, потому что this в функции обратного вызова ссылается на global.

addClaim(claimCode){
 var self = this;
 sap.deviceInfo(function callback(err, dat) {
   if (err) { throw err; }
   console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
   self.AccuprobeID = dat.id
 });
 sap.setClaimCode(claimCode, function callback(err, dat) {
   if(err) { throw err; }
 });

 this.claimCodeSet = true
}

в противном случаеиспользуйте функцию стрелки для прямого доступа к this.

addClaim(claimCode){
 sap.deviceInfo((err, dat) => {
   if (err) { throw err; }
   console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
   this.AccuprobeID = dat.id
 });
 sap.setClaimCode(claimCode, (err, dat) => {
   if(err) { throw err; }
 });

 this.claimCodeSet = true
}

javascript-variable-scope-this

Answer 2

Вам необходимо использовать AccuprobeID, который вы объявили в data.И чтобы его использовать, нужно сделать this.AccuprobeID.

Вот код:

<template>
  <div class="home">
        <b-button v-if="!claimCode.length>0" @click="createClaim">claim</b-button>
        <div v-if="claimCode.length>0 && !claimCodeSet">
          <p>Please Switch Network to Photon </p>
           <b-button variant="primary"  @click="addClaim(claimCode)">Add Claim Code to Accuprobe</b-button>
        </div>
        <div v-if="claimCodeSet">
            Please Switch Back to Normal Network
            <b-button @click="claimDeviceToProduct">Claim to Account</b-button>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
var SoftAPSetup = require('softap-setup');
var sap = new SoftAPSetup();
 var Particle = require('particle-api-js');
var particle = new Particle();
var token;
export default {
  data(){
    return{
      claimCode:'',
      claimCodeSet:false,
      AccuprobeID:''
    }
  },
  name: 'home',
  components: {
  },
  methods:{
    createClaim(){
      axios.post('https://api.particle.io/v1/products/2121/device_claims/?access_token='+this.$store.state.user.PToken)
      .then((res)=>{
        console.log(res)
        this.claimCode=res.data.claim_code;
        console.log(this.claimCode)})
    },
    addClaim(claimCode){
      sap.deviceInfo(callback);
      function callback(err, dat) {
        if (err) { throw err; }
        console.log("Device ID: %s, claimed: %s", dat.id, dat.claimed ? "yes" : "no");
         this.AccuprobeID=dat.id;
      };
      sap.setClaimCode(claimCode,callback);
      function callback(err, dat) {
        if(err) { throw err; }
        }
      this.claimCodeSet=true;
    },
    claimDeviceToProduct(){
      console.log(this.AccuprobeID)
      particle.addDeviceToProduct({product:'2121', deviceId: this.AccuprobeID, auth: this.$store.state.user.Bear }).then(function(data) {
        console.log('device claim data:', data);
      }, function(err) {
        console.log('device claim err:', err);
      });
    },
  }}
</script>