如何在 VueJS 中在 onchange 方法中显示变量?

Question

如果它在页面上更改方法，如何在页面中显示变量。 例如，此代码：

methods: {
onChange(image) {
if (image) {
EXIF.getData(this.$refs.pictureInput.file, function () {
var make = EXIF.getTag(this, "Make"),
model = EXIF.getTag(this, "Model");
})
} else {
console.log(`it's not image`)
}
},
}

我想要向用户显示品牌和模型变量。

Answer 1

要在另一个作用域内访问组件的this，(在您的例子中是 EXIF回调(只需在更高作用域中创建对组件this的新引用，并在回调函数中访问它。

export default {
data () {
return {
name: '',
model: ''
}
},
methods: {
onChange(image) {
const component = this;
if (image) {
EXIF.getData(this.$refs.pictureInput.file, function () {
var make = EXIF.getTag(this, "Make"),
model = EXIF.getTag(this, "Model");
component.make = make;
component.model = model;
})
} else {
console.log(`it's not image`)
}
}
}
}

现在在您的模板中：

<template>
<div>
<span>Name: {{name}}</span>
<span>Model: {{model}}</span>
</div>
</template>