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

我正在用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>

常量条码扫描程序=需要（“nativescript-
条形码扫描仪”）。条形码扫描仪；
从“/Display”导入显示；
导出默认值{
数据（）{
返回{
案文：“”
};
},
方法：{
扫描：函数（）{
var barcodescanner=新的条形码扫描仪（）；
条形码扫描仪
.扫描({
//格式：“QR_代码，PDF_417”//传入您想要限制扫描的特定类型
cancelLabel:“退出。另外，尝试音量按钮！”，//仅限iOS，默认为“关闭”
cancelLabelBackgroundColor:#333333“，//仅限iOS，默认值为“#000000”（黑色）
信息：“将音量按钮用于额外照明”//Android only，默认设置为“在取景器矩形内放置条形码进行扫描”
showFlipCameraButton:true，//默认值false
preferFrontCamera:false，//默认值false
showTorchButton:true，//默认值false
beepOnScan:true，//扫描时播放或抑制蜂鸣音（默认为true）
torchOn:false，//打开手电筒启动（默认为false）
closeCallback:function（）{
控制台日志（“扫描仪关闭”）；
}，//扫描仪关闭时调用（成功或中止）
resultDisplayDuration:500，//仅限Android，默认值为1500（ms），设置为0可禁用回显扫描文本
//方向：“横向”，仅限Android，可选择将方向锁定为“纵向”或“横向”
OpenSettingsIfPermissionsPreviouslyDenied:true//在iOS上，如果先前拒绝访问，您可以将用户发送到设置应用程序
})
.那么(
功能（结果）{
console.log（“扫描格式：+result.format”）；
console.log（“扫描文本：+result.text”）；
this.text=result.text.trim（）；
this.$navigateTo（显示，{context:{propsData:{“code”：this.text}}）；
},
函数（错误）{
console.log（“无扫描：+错误）；
}
);
}
}
};

扫描完成后，我想导航到我的另一个组件“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>

导出默认值{
道具：{
代码：{
类型：字符串，
要求：正确，
}
},
数据（）{
返回{
员额：[]，
};
},
方法：{}，
beforeCreate（）{
取回(
`my api.com/product/${this.code}.json`
)
.then（response=>response.json（））
。然后（数据=>{
this.posts=data.product；
});
}
};

---

但是在这里我遇到了一个问题，我不知道如何调用我的api以及何时调用（挂载，beforeMounted…）。因为我的“显示”组件似乎已与我的“主”组件同时安装。

您可以将数据值设置为true，并让您的显示组件使用v-if指令。这也将安装它

data:{
   showDisplay: false
}

<Display v-if ='showDisplay' />

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

数据：{
showDisplay:错误
}
someAsyncMethod（）。然后（结果=>{
//在这里开始
this.showDisplay=true
}

您只需将数据值设置为true，并让显示组件使用v-if指令。这也将挂载它

data:{
   showDisplay: false
}

<Display v-if ='showDisplay' />

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

数据：{
showDisplay:错误
}
someAsyncMethod（）。然后（结果=>{
//在这里开始
this.showDisplay=true
}

不要使用

function（）{}

而是使用Arrow函数（

=>

）。如果使用

的Arrow函数，则此

的上下文不会更改。另一方面，如果使用

function（）{}
不要使用
function（）{/code>使用Arrow函数，则此
的上下文将根据调用上下文更改（
=>
）相反。如果使用
函数（）{}
，则使用
的箭头函数，此
的上下文不会改变；
的上下文将根据调用上下文而改变，但我更愿意导航到新的框架以进行适当的设计（似乎我必须使用nativescript vue）然后将v-if放在模板标记中，并在设置标志后导航到它。这将延迟装载。因此，v-if的计算结果为false，而您的组件仍然被装载？模板标记上的v-if似乎根本没有被解释。因此，是的，它仍然被装载。因此，如果在产品元素周围放置一个模板标记并使用v-if='false'，它仍然被装载ll被挂载？但我更愿意导航到一个新的框架来进行适当的设计（似乎我必须使用nativescript vue）然后将v-if放在模板标记中，并在设置标志后导航到它。这将延迟装载。因此，v-if的计算结果为false，而您的组件仍然被装载？模板标记上的v-if似乎根本没有被解释。因此，是的，它仍然被装载。因此，如果在产品元素周围放置一个模板标记并使用v-if='false'，它仍然被装载你会上马吗？