英文:
Vue problems convert options API to Composition API
问题
原组件使用选项 API 编写，当用户选择图像时，图像会显示在屏幕上。您尝试将其转换为使用组合 API，但图像未显示。以下是原组件和尝试转换为组合 API 的部分：
原组件：
<script>
export default {
name: 'imageUpload',
data() {
return {
imageUrl: null
}
},
methods: {
onChange(e) {
const file = e.target.files[0]
this.imageUrl = URL.createObjectURL(file)
}
}
}
</script>
<template>
<input type="file" accept="image/*" @change="onChange" />
<div id="preview">
<img v-if="imageUrl" :src="imageUrl" />
</div>
</template>
尝试转换为组合 API：
<script setup>
import { ref } from 'vue';
let imageURL = ref(null);
const onChange = (e) => {
const file = e.target.files[0];
imageURL.value = URL.createObjectURL(file);
}
</script>
<template>
<input type="file" accept="image/*" @change="onChange" />
<div id="preview">
<img v-if="imageURL.value" :src="imageURL.value" />
</div>
</template>
主要更改是将 data 替换为 ref，并使用 .value 来访问 ref 变量。原始的 URL.createObjectURL 调用也应该在组合 API 中正常工作。如果仍然有问题，您可能需要检查控制台以获取错误消息，以便更好地理解问题所在。
英文:
I have a vue component written using options API, and it's working as intended. When the user selects an image, it is displayed on the screen.
I am trying to convert this to using composition API, but it's not showing the image.
This is the original component:
<script>
export default {
name: 'imageUpload',
data() {
return {
imageUrl: null
}
},
methods: {
onChange(e) {
const file = e.target.files[0]
this.imageUrl = URL.createObjectURL(file)
}
}
}
</script>
<template>
<input type="file" accept="image/*" @change="onChange" />
<div id="preview">
<img v-if="imageUrl" :src="imageUrl" />
</div>
</template>
This is how I'm trying to convert it to composition, by using ref and then referring to the variables with .value? I'm not sure what I'm doing wrong.
<script setup>
import { ref } from 'vue';
let imageURL = ref(null);
const onChange=(e) =>{
const file = e.target.files[0];
imageURL.value = file;
}
</script>
<template>
<input type="file" accept="image/*" @change="onChange" />
<div id="preview">
<img v-if="imageUrl.value" :src="imageUrl.value" />
</div>
</template>
答案1
得分: 1
在模板中，请仅在<script>中使用.value。在模板中，Vue将自动取消引用：
<img v-if="imageUrl" :src="imageUrl" />
此外，我认为您仍需要为文件创建一个URL：
onChange(e) {
const file = e.target.files[0]
imageUrl.value = URL.createObjectURL(file)
}
英文:
Use .value only in the <script>. In the template, Vue will unref if automatically:
<img v-if="imageUrl" :src="imageUrl" />
Also, I think you still have to create an URL for your file:
onChange(e) {
const file = e.target.files[0]
imageUrl.value = URL.createObjectURL(file)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论