英文:
referencing el-date-picker inner elements
问题
<ElDatePicker ref="datePickerRef" />
mounted() {
console.log(this.$refs.datePickerRef.$el.querySelector('.el-input__inner'));
}
如何将这段代码转换为Vue 3的选项API？已尝试过ChatGPT建议的方法，但都没有成功。
英文:
<ElDatePicker ref="datePickerRef" />
mounted() {
console.log(this.$refs.datePickerRef.$el.querySelector('.el-input__inner');
}
How do I convert this to vue3 options api? Tried ways suggested by chatgpt already, but nothing worked
答案1
得分: 1
你是指在Composition API中吧，因为你已经在Options API中了，这里假设你正在使用TypeScript：
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElDatePicker } from './你的/组件路径/component.vue';
const datePickerRef = ref<typeof ElDatePicker | null>(null);
onMounted(() => {
if (datePickerRef.value) {
console.log(datePickerRef.value.$el.querySelector('.el-input__inner'));
}
});
</script>
<template>
<ElDatePicker ref="datePickerRef" />
</template>
如果你没有使用TypeScript：
<script setup>
import { onMounted, ref } from 'vue';
const datePickerRef = ref(null);
onMounted(() => {
if (datePickerRef.value) {
console.log(datePickerRef.value.$el.querySelector('.el-input__inner'));
}
});
</script>
<template>
<ElDatePicker ref="datePickerRef" />
</template>
英文:
You mean in composition API I suppose, because you are already in options API, here it is supposing you are on typescript :
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ElDatePicker } from './your/path/to/component.vue';
const datePickerRef = ref<typeof ElDatePicker | null>(null);
onMounted(() => {
if (datePickerRef.value) {
console.log(datePickerRef.value.$el.querySelector('.el-input__inner'));
}
});
</script>
<template>
<ElDatePicker ref="datePickerRef" />
</template>
if you are not in typescript:
<script setup>
import { onMounted, ref } from 'vue';
const datePickerRef = ref(null);
onMounted(() => {
if (datePickerRef.value) {
console.log(datePickerRef.value.$el.querySelector('.el-input__inner'));
}
});
</script>
<template>
<ElDatePicker ref="datePickerRef" />
</template>
答案2
得分: 0
<script setup>
import { ref, onMounted } from "vue";
const myReference = ref(null);
onMounted(() => {
console.log(myReference.value); <-- 这将输出一个 DOM 节点
})
</script>
<template>
<h1 ref="myReference">我现在可以访问 DOM 引用了</h1>
</template>
英文:
<script setup>
import { ref, onMounted } from "vue";
const myReference = ref(null);
onMounted(() => {
console.log(myReference.value); <-- This will output a DOM node
})
</script>
<template>
<h1 ref="myReference">I have access to the DOM reference now</h1>
</template>
Here is an example of using $refs in Vue 3 with Composition API and Script Setup
view more
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论