扫描产品然后使用 nativescript-vue 导航到另一个组件

Question

我正在使用 nativescript-vue 制作一个简单的应用程序，在主页上我有一个启动扫描仪的按钮，因此我可以扫描产品。这是我的主页：

<template>
  <Page class="page">

   <StackLayout class="hello-world">
     <Button @tap="scan" text="Scan a product"/>
   </StackLayout>

  </Page>
</template>

<script>
const BarcodeScanner = require("nativescript- 
barcodescanner").BarcodeScanner;
import Display from "./Display";
export default {
data() {
  return {
    text: ""
  };
},
methods: {
scan: function() {
  var barcodescanner = new BarcodeScanner();
  barcodescanner
    .scan({
      // formats: "QR_CODE,PDF_417", // Pass in of you want to restrict scanning to certain types
      cancelLabel: "EXIT. Also, try the volume buttons!", // iOS only, default 'Close'
      cancelLabelBackgroundColor: "#333333", // iOS only, default '#000000' (black)
      message: "Use the volume buttons for extra light", // Android only, default is 'Place a barcode inside the viewfinder rectangle to scan it.'
      showFlipCameraButton: true, // default false
      preferFrontCamera: false, // default false
      showTorchButton: true, // default false
      beepOnScan: true, // Play or Suppress beep on scan (default true)
      torchOn: false, // launch with the flashlight on (default false)
      closeCallback: function() {
        console.log("Scanner closed");
      }, // invoked when the scanner was closed (success or abort)
      resultDisplayDuration: 500, // Android only, default 1500 (ms), set to 0 to disable echoing the scanned text
      // orientation: "landscape", // Android only, optionally lock the orientation to either "portrait" or "landscape"
      openSettingsIfPermissionWasPreviouslyDenied: true // On iOS you can send the user to the settings app if access was previously denied
    })
    .then(
      function(result) {
        console.log("Scan format : " + result.format);
        console.log("Scan text :   " + result.text);
        this.text = result.text.trim();
         this.$navigateTo(Display, {context: {propsData: {"code":  this.text }}});

      },
      function(error) {
        console.log("No scan: " + error);
      }
    );
  }
}
};
</script>

扫描完成后，我想导航到我的其他组件 "Display"，我想在其中使用之前扫描的文本向我的 api 发出提取请求，并获得一些有关的产品信息它，这是我的显示组件：

<template>
  <Page class="page">
    <ActionBar class="action-bar" title="Results"/>

   <StackLayout>
     <Label v-if="posts.product_name" :text="posts.product_name" />
     <Image :src="posts.image_thumb_url" stretch="none" />
     <Label :text="posts.ingredients_text_fr" class="list-group-item-text" textWrap="true"></Label>
   </StackLayout>

  </Page>
</template>

<script>
export default {
  props: {
    code: {
     type: String,
     required: true,
   }
  },
data() {
  return {
    posts: [],
  };
},
methods: {},
beforeCreate() {
  fetch(
  `my-api.com/product/${this.code}.json`
)
  .then(response => response.json())
  .then(data => {
   this.posts = data.product;
      });
  }
};
 </script>

但这里我有一个问题，我不知道如何调用我的 api 以及何时（已安装，beforeMounted....）。因为我的 "display" 组件似乎已经与我的 "home" 组件同时安装。

Answer 1

您可以只将数据值设置为 true，并让您的 Display 组件使用 v-if 指令。那也将挂载它。

data:{
   showDisplay: false
}

<Display v-if ='showDisplay' />

someAsyncMethod().then(result => {
   // do init here
   this.showDisplay = true
}

Answer 2

不要使用 function() {} 而是使用箭头函数 (=>)。 this 的箭头函数上下文不会改变，另一方面，如果您使用 function() {}.

，this 的上下文将根据调用上下文而改变

扫描产品然后使用 nativescript-vue 导航到另一个组件

scan a product then navigate to another component with nativescript-vue

fetch

nativescript

vuejs2

nativescript-vue