我正在使用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>
扫描完成后，我想导航到我的另一个组件"显示"，我想在其中使用之前扫描的文本向我的 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 以及何时调用(挂载，之前挂载......因为我的"显示"组件似乎已经与我的"主页"组件同时安装。
您可以将数据值设置为 true，并让显示组件使用 v-if 指令。 那也将安装它。
data:{
showDisplay: false
}
<Display v-if ='showDisplay' />
someAsyncMethod().then(result => {
// do init here
this.showDisplay = true
}
不要使用function() {}改用箭头函数(=>(。 使用箭头函数this的上下文不会改变 另一方面，如果使用function() {}，this上下文将根据调用上下文而更改。