Vue/Jasmine:在不使用ref的情况下获取元素
在Vue中，可以使用Jasmine来进行单元测试。在不使用ref的情况下获取元素，可以通过以下几种方式实现：
- 使用选择器：可以使用CSS选择器来获取元素。在Vue中，可以使用
querySelector或querySelectorAll方法来选择元素。例如，要获取id为"myElement"的元素，可以使用以下代码：
const element = document.querySelector('#myElement');- 使用事件对象：在事件处理程序中，可以通过事件对象来获取触发事件的元素。例如，要获取点击按钮的元素，可以使用以下代码：
methods: {
handleClick(event) {
const element = event.target;
// 其他操作
}
}- 使用Vue的$refs属性：Vue提供了$refs属性，可以通过给元素添加ref属性来获取元素。但是在这个问题中要求不使用ref，所以这种方式不适用。
以上是在不使用ref的情况下获取元素的几种方式。根据具体的场景和需求，选择合适的方式来获取元素。
关于Vue和Jasmine的更多信息，可以参考以下链接：
- Vue官方网站：https://vuejs.org/
- Jasmine官方网站：https://jasmine.github.io/
相关·内容
<div :class="$style.dateOf" v-if="hasName">
test
</div> 我正在尝试获取一个元素来在Jasmine中进行测试，但每次我之前做过的时候，我都会抓住一个ref： await this.wrapper.setProps({ hasName: true });
await this.wrapper.vm.$nextTick();
const container = this.vm.$refs.containerMain as Vue; 我不想为了测试而随意添加引用。有没有
浏览 58提问于2021-09-10得票数 0
5回答
我想从父级获取vue.js组件的维度(我正在使用实验性的)。
当我在组件中使用ref时，它会像预期的那样工作。我知道尺寸：
// Child.vue
<template>
<div ref="wrapper">
// content ...
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const wrapper = ref(null)
onMounted(() => {
cons
浏览 4提问于2021-04-10得票数 25
回答已采纳
2回答
我有一个简单的Vue组件，根元素作为ref="divRef"。但是，在onMounted函数中，divRef.value返回未定义的内容。任何帮助都将不胜感激。
import { defineComponent, onMounted, ref, Ref, h } from "vue"
export default defineComponent({
setup(props, context) {
const divRef = ref() as Ref<HTMLElement>
onMounted(() =&
浏览 2提问于2020-07-10得票数 4
回答已采纳
我目前正在测试Vue.js，并在我的项目中使用了一些参考资料。我不确定每次在我的方法中调用ref时，是否执行了DOM查找，或者vue存储了所有ref一次，然后访问了引用。
我无法在文档中找到答案，也无法通过谷歌找到答案。
示例
myDiv = this.$refs.myDiv
我是否需要自己将ref存储在变量中，还是在多次调用ref时不影响性能？
浏览 0提问于2018-06-14得票数 4
回答已采纳
嘿，伙计们，我对vue.js是个新手。并且我想使用子路由进行路由。我几乎读了每一篇文章，但我做不到。我的代码有问题。所以如果可以的话请帮帮我。这是我的代码和模板。 Router.js import Vue from 'vue'
import Router from 'vue-router'
import Game from '../components/game/Game.vue'
import Home from '../views/Home.vue'
import Login from '../views/Login
浏览 24提问于2020-08-15得票数 0
我正在创建一个应用程序，用户可以创建项目并将其分配给用户，因为我正在使用go中的api，因此表单将数据发送到api以保存信息，然后api将输入数据返回给我，将数据记录在数组中。
我在Vue 3的表格：
export default {
setup() {
const name = ref('');
const description = ref('');
const endProject = ref('');
const user = ref(0);
const users = ref();
c
浏览 1提问于2021-08-03得票数 1
回答已采纳
1回答
在Laravel中定义vue组件
、、、、
我使用VueJS在视图中加载数据(使用Laravel)。我确实在app.js文件中注册了我的组件，当我想在我的刀片文件中使用它们时，它会给出以下错误：
(未知自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。)
我的app.js文件：
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: 'body'
});
V
浏览 5提问于2017-07-29得票数 0
我希望完全控制<input>元素的内容。
有了反应，我可以这样做：
import { useState } from "react";
function Form() {
const [value, setValue] = useState("");
const onSubmit = (event) => {
event.preventDefault();
// Do something with `value`
};
const onChange = (event) => {
const {
浏览 3提问于2022-07-23得票数 3
1回答
我想测试一个Vue输入组件，它在挂载的钩子上改变它的输入(稍后在模糊上)。组件本身似乎可以工作，但是测试实用程序没有得到正确的值。在这个演示中，我使用了jasmine测试框架：
const appendValue = '_lily';
const testInput = {
props: ['value'],
template: `<input ref="testInput" v-on:blur="appendTest" v-model="inputValue"/>`,
mounted()
浏览 3提问于2019-11-18得票数 3
回答已采纳
1回答
这是我的vue js代码，我正在尝试使用元素ui向它添加一个弹出。
但每次我在上面盘旋，它都不起作用
<template v-else-if="column.prop == 'Documents'">
<div class="Profile__historical-btn">
<el-popover
ref="popoverRef"
trigger="hover"
浏览 9提问于2022-09-07得票数 0
1回答
‘希望有人能帮我。我正在研究Vue，pinia……甚至javascript……一组数据通过python后端来自mySQL数据库，pinia和我想要访问数组中的一个项目……
<script setup>
import { computed, ref }from 'vue'
import { storeToRefs } from 'pinia'
import { useBaseStore } from '../stores/base'
const { area } = storeToRefs(u
浏览 1提问于2022-07-01得票数 0
1回答
我想要设置以下组件，并想在其上运行以下基本单元测试。
(我刚接触Vue.js，不确定哪些信息对解决我的问题有价值。请询问其他特定的代码部分是否对我有帮助。)
user-information.vue：
<template>
<v-layout row wrap justify-center id="wrapper">
<v-flex class="text-xs-center centered">
<v-card>
<v-card-title primary class="ti
浏览 8提问于2018-11-21得票数 1
我真的很困惑于输入元素的"ref“属性。我从来没有听说过基于我的知识，也找不到一些关于it.The代码的有意义的材料是在vue.js官方文档中。
<currency-input v-model="price"></currency-input>
这是关于组件的代码：
Vue.component('currency-input', {
template: `
<span>
$
<input
ref="input"
v-bind:va
浏览 2提问于2017-05-19得票数 78
回答已采纳
我正在将我的应用程序从Vue2转换到Vue3，但在表单的一个方面却被搁置了。
我对表单元素组件(FormInput、FormTextArea、FormCheckbox等)使用SFCs，并使用插槽将它们传递到表单容器组件(FormGroup、FormTab等)，如下所示：
<ssi-form>
<ssi-form-tabs>
<ssi-form-tab title="tab1">
<ssi-form-input title="name" ... />
<ssi-form-ch
浏览 8提问于2022-05-26得票数 1
回答已采纳
2回答
我是Vue 3的初学者，当我学习Vue 3时，我遇到了一个在Vue 3模板中处理DOM的问题。在这里，源代码是。
MainContainer.vue
<template>
<div class="main-container" ref="mainContainer">
<button @click="randomBackgroundColor">Random Background Color</button>
</div>
</template>
<s
浏览 3提问于2021-03-26得票数 2
回答已采纳
所以我通过npm安装了jasmine和vue，但是当我导入组件本身时，它无法读取位于<template></template>标记之间的模板，这是一个.vue文件。我也在使用webpack，不确定我是否需要用它做点什么。
下面是vue组件文件的外观
<template>
...
</template>
<script>
export default {
name: 'test',
data: {},
computed: {}
}
</script>
浏览 0提问于2016-12-14得票数 0
在使用箭头函数的反应中
class AppComponent extends Component {
componentDidMount() {
this.createAppComponent()
}
createAppComponent() {
const node = this.node
}
render() {
return <div ref={node => this.node = node}></div>
}
}
如何在Vue组件中初始化相同的node属性？
浏览 0提问于2019-02-26得票数 1
回答已采纳
我一直在用Vue3.js & Vue Cli开发我的第一个项目，在过去的几个小时里，我一直在编写这段代码。
基本上，我要做的是根据在代码的setup()部分中创建的对象数组拥有一个按钮列表。所有对象都在数组本身中包含自己的ref，我最终将其绑定到模板上。然后，我从每个引用中生成consts，以便可以在安装程序()中使用它们，但是当我使用console.log(btnConvert.value)时，我得到了一个代理，而对于不在v-for循环中的其他引用，则不使用代理。
RefImpl {_rawValue: Proxy, _shallow: false, __v_isRef: t
浏览 0提问于2021-04-21得票数 3
回答已采纳
1回答
在vue 1中，可以这样做：
<app v-ref:test-app></app>
然后引用如下：
vm.$refs.testApp;
但是，在vue 2中，ref的语法已更改为：
<app ref="test-app"></app>
但这已不能再被
vm.$refs.testApp
相反，它只在以下情况下才能工作：
<app ref="testApp"></app>
在标准DOM里是不允许的。是虫子吗？烤肉盒可以不再使用了吗？
浏览 3提问于2016-12-19得票数 19
回答已采纳
1回答
对于toRaw()，我有一个反应性混淆。
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<TheForm @newThing="addNewThing" />
<TheList :allTheThings="allTheThings" />
</template>
<script setup>
import TheForm from "./compo
浏览 5提问于2021-02-05得票数 0
回答已采纳
1回答
我试图在VUE中创建一个VUE组件预览(类似于JSFiddle/CodePen)。
需要向最终用户显示组件的外观的VUE容器：
<quickpreview v-html="code"></quickpreview>
code的内容是原始的HTML，如下所示：
<PRE-TASK>
<STEP>
<INSTRUCTION>
<REF-DS>das Teleskopieren ...</REF-DS>.</INSTRUCTION>
浏览 0提问于2018-06-24得票数 6
开发人员好，我正在用Vuejs和Firebase构建这个应用程序，在Firebase的存储模块中存储了一些视频和图像，但是当我初始化检索图像的函数时，我收到了这个错误："firebase__WEBPACK_IMPORTED_MODULE_2__.storage(...).ref(...).child(...).then不是一个函数。 在我的Vuex方法中，我设置它是为了访问我的firebase存储中的图像 actions: {
getVideoAboutMe({commit}) {
firebase
.storage()
.ref(
浏览 6提问于2020-07-04得票数 0
回答已采纳
我试图从包装器中获取一个元素的ref属性，但它正在抛出一个错误，如下所示。
根据，我对find的使用似乎是正确的。
SyntaxError: '[object Object]' is not a valid selector
13 | const lis = wrapper.findAll('li');
14 |
> 15 | const a = wrapper.find({ ref: 'first' });
| ^
16 |
17 | c
浏览 5提问于2020-10-24得票数 0
回答已采纳
我对Vue组合API很陌生，需要使用文档方法querySelector。然而，它并没有像预期的那样起作用。如果我写
<nav class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<script setup>
import { ref } from "vue";
const observer = new IntersectionObserver(handleIntersection);
const target = document.querySelector
浏览 28提问于2022-04-04得票数 2
回答已采纳
对于Vue来说，我一般都是新手，目前正在使用3.2.37，我可能认为正确使用复合api的defineExpose指令，如本文所述：
还可以找到一些线程，解释如何在<script setup>内部公开成员，比如。但不知何故，我无法从子组件HelloWorld中公开HelloWorld常量ref，这样就可以在app组件中插入它的version。
app.vue：
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template&g
浏览 25提问于2022-08-13得票数 1
1回答
在元素-+中，我们已经有图标，例如<i-mdi-edit />。
如何使用这些图标，以便创建自己的组件
<Icon name="edit" />
我传递name属性，这样我就可以得到图标
我的Icon组件如下；
<script setup lang="ts">
import { ref } from "vue";
let props = withDefaults(defineProps<{ name: string }>(), {
name: "edit",
});
浏览 6提问于2022-04-14得票数 0
1回答
我尝试构建在Intel机器上构建的js项目。但在苹果硅M1上，我收到了这个错误。将这个库添加到package.json中并没有改变任何东西。 ⠴ Building for production...
ERROR Failed to compile with 5 errors
浏览 71提问于2021-06-16得票数 0
我正在使用Vue Dropzone ()，我的一个页面有多个dropzone实例，用于同一页面的不同部分。我关闭了autoProcessQueue，这样他们在添加到dropzone后不会自动上传。我给了每个实例一个ref，这样我就可以手动调用processQueue，但是有没有一种方法可以在POST中发送它们，而不是单独调用3次？
<vue-drop-zone ref="myVueDropzone1" id="dropzone" :options="dropzoneOptions">
</vue-drop-zone>
&
浏览 2提问于2020-05-20得票数 0
2回答
如何在安装vue后更新模板ref
、、、、
我正在尝试运行一个函数，不管它是计算的，还是在模板挂载后观察或观察的。监视效果只执行一次，当然计算在挂载之前运行。我试过flush: 'post'的手表效果和冲水表，我是相当卡住了。查看文档时，它应该按照预期工作：
因此，使用模板参考的观察者应该使用刷新：'post‘选项来定义。这将在DOM更新后运行效果，并确保模板ref与DOM保持同步并引用正确的元素。
app.vue
<template>
<div ref="target">
<h1>my title</h1>
<p&
浏览 0提问于2021-07-29得票数 0
回答已采纳
我第一次尝试在我的视图中使用Vue组件。我创建了一个文件assets/js/components/ImageUpload.vue，如下所示：
<template>
<div>
<div v-if="!image">
<h2>Select an image</h2>
<input type="file" @change="onFileChange">
</div>
<div v-else>
<img :src=&
浏览 6提问于2016-10-13得票数 1
回答已采纳
我在和裁判搏斗。如果我在主Vue实例的模板中定义了它们，它们可以正常工作，但是如果我在组件模板中定义它们，它们就不会。我做错了什么？
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv=
浏览 0提问于2019-07-28得票数 0
回答已采纳
2回答
Vuejs输入文件格式
、、、
在我的vue-bootstrap应用程序中，我想使用隐藏的输入文件控制。当我使用标准输入组件时，它可以工作(Load 1)。如果我尝试对反应式组件表单vue-bootstrap库执行相同的操作，它将不起作用(加载2)。如果有任何提示我可能做错了什么，我将不胜感激。 app = new Vue({
el: "#app",
data: {
files: '',
}
}) <html>
<head>
<link rel="stylesheet" href="https://maxcdn
浏览 10提问于2019-01-31得票数 0
回答已采纳
2回答
当我试图构建我的VueJS类型记录应用程序时，我会得到以下依赖错误。
vue-cli服务
信息启动开发服务器..。启动类型检查和衬里服务..。在发射CopyPlugin后使用一个内存限制为2048 98的工作人员98%
错误编译失败，有5个错误9:05:52 PM，没有找到这些依赖项：
./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-2!./node_modules/cache-loader/dis
浏览 1提问于2019-07-02得票数 5
1回答
我使用vue3-openlyers创建一个如下所示的地图： <ol-map ref="map">
...
</ol-map> 在Vue的组合api中，我尝试访问映射的getSize()方法： import { ref, defineComponent, onMounted } from "vue";
export default defineComponent({
setup() {
//works with views
const map = ref<any>(null);
浏览 99提问于2021-08-28得票数 0
我想确保我的组件具有与宽度相同的高度。为此，我添加了调整大小的事件侦听器。目前我有这个代码
<template>
<div
:ref="cellId"
>
</div>
</template>
<script>
export default {
data: function() {
return {
cellId: '_' + Math.random().toString(36).substr(2, 9)
浏览 1提问于2019-06-01得票数 0
回答已采纳
1回答
基于vue的d3图形绘制
、、、
由于不兼容的依赖关系，我不得不将vue3降级为vue2。我用D3库创建了一个力有向图。使用复合api在vue3中查找所有内容都是有效的。我对vue 2不太熟悉，并且调整我的图形以适应vue2并不适合我。在vue3中，这是非常严格的，ref()使得它非常容易完成。至于vue2，我已经很好地利用了生命周期挂钩，比如计算和监视。
任何帮助都是受欢迎的。
下面是我的工作组件在vue3中的一种极简表示。这个组件在svg中创建图形，然后在模板中呈现它。
<template>
<div class="col" style="position: absolute;
浏览 6提问于2022-02-22得票数 1
3回答
我已经在谷歌上搜索了几个小时，在堆栈溢出上阅读了无数的vue文档和相关的帖子，但没有运气。
我需要访问组件的内部属性，因为该组件只是普通组件的包装器，我需要在父组件中访问它。
我正在尝试创建一个只有在父组件(App)中才能访问的惟一的ref，我的理解是，我应该在setup方法中这样做：const myRef = ref(null)
但是唉，myRef.value永远是null
输入档案：
import { createApp } from 'vue'
import App from "./App.vue";
createApp(App).mount(&#
浏览 4提问于2020-10-06得票数 3
代码示例用于Vue3组合API来处理注册表单。其目的是在按钮按下后禁用它，直到只调用一次singin代码(省略)为止。
为什么使用submitButton.value与只使用submitButton
setup() {
const submitButton = ref<HTMLButtonElement | null>(null);
//Form submit function
const onSubmitLogin = (values) => {
//Disable button
/* eslint-disable @typescript-eslint/no
浏览 10提问于2022-02-28得票数 1
回答已采纳
1回答
在Vue 3应用程序中跨视图复制组件的相同类型但不同实例的模板参考值(即ref="foo" )是否存在问题？考虑下面的伪代码示例：
// ROUTE A
<template>
<MyTableComponent ref="foo" class="stylesForTable_ViewA"/>
</template>
<script setup>
import { ref } from "vue";
const foo = ref();
</script>
浏览 10提问于2022-08-16得票数 0
回答已采纳
1回答
当从Vue中的ref数组中移除元素时，它会移除JS端的正确元素，然而在DOM中，它删除了列表的最后一个元素。我不知道为什么它移除了错误的元素。
例如：
const ar = ref([A, B, C]);
当我删除B并记录删除时，我得到一个数组A，C。然而，在我的When应用程序上，呈现的元素的值为A、B，而不是A、C。我使用了不同的方法从数组中删除元素，最有效的方法显然是splice，但正如我所说的，我的组件呈现A、B元素而不是A、C。
这是代码：
// I create a dynamic array from a v-model, with some minor transformati
浏览 10提问于2022-05-25得票数 0
回答已采纳
1回答
我想将ref属性附加到具有自定义指令的HTML元素。
假设我有一个名为v-custom的指令，每当在元素上使用它时，我都希望将ref="elem"添加到该元素中。
我尝试过使用这样的指令：
Vue.directive('custom', {
inserted(el) {
el.setAttribute("ref", "elem");
}
});
在我的一个组件中，我有这个：
<span v-custom>Testing</span>
当我在网页中查看它时，我可以检查span元
浏览 5提问于2019-07-07得票数 2
回答已采纳
1回答
我已经使用这个结构创建了vue组件。
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
我想用karma和jasmine或者jasmine rails gem来测试一下。我想不出如何测试这个组件。在文档中的所有示例中，他们都使用requirejs模块方式进行测试。我使用全局组件的方式来创建组件。
这些是文档中的示例。
<template>
<span>{{ message }}</span>
浏览 0提问于2016-11-11得票数 1
我试图简化我的问题：
让我们说我有模态成分
//example.php
<modal>
<div>A big div</div>
</modal>
在显示模态之前，我需要计算适当的动画的高度。在模态Vue内部，它看起来如下：
//Modal.vue
...
<transition
:name="transition"
@before-enter="beforeTransitionEnter"
@after-leave="afterTransit
浏览 1提问于2018-10-16得票数 2
我正在尝试从Firebase/Firestore返回用户集合，但是当我在控制台中检查它时，我所拥有的代码不会返回任何内容。你能帮帮我吗，我是新来的？我正在试图找到与当前登录的用户具有相同显示名的用户，但我被卡住了。
<template>
<p>Process Payroll</p>
<h1>{{ user.displayName }} </h1>
<h1>{{ docs }} </h1>
</template>
<script>
import getUser from
浏览 6提问于2021-09-24得票数 1
回答已采纳
完全错误：
[plugin:vite:vue] Transform failed with 1 error:
/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73:
ERROR: Invalid assignment target
"/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73"
Invalid assignment target
31 | ? (_openBlock(), _crea
浏览 57提问于2022-11-15得票数 2
回答已采纳
我在悬念组件上添加了一个转换，因为Vue的文档建议了将其路由到动态路由路径的方法，动画在单独加载和重新加载每个页面时工作，但它不适用于路由(当用户单击路由链接时)，也没有显示错误。
要了解它的行为，您可以查看活动站点：
要查看您可以转到的所有代码：
下面是主要的App.vue文件：
<template>
<NavigationBar />
<RouterView v-slot="{ Component }">
<template v-if="Component">
浏览 2提问于2022-10-12得票数 0
回答已采纳
3回答
我试图在vue组件中使用document.getElementById().scrollIntoView()来使用跳转到Div类型的特性。
如果在组件中调用该函数，则该功能可以正常工作。但是，如果我尝试使用ref从父组件调用函数，则元素不会滚动到视图中。
父组件是页，子组件是页中的选项卡。
这是父组件中的子Vue组件 :-
<el-tab-pane label="Solution Details" name="Solution Details" v-loading="loading">
<solu
浏览 3提问于2017-06-17得票数 26
回答已采纳
我在vue项目中使用vuejs-datepicker。我想隐藏默认输入，并在用户按下按钮时显示日历。我正在尝试让<datepicker/>在div中应用css为div，以便我可以隐藏它。
<div class="datePickerDiv">
<datepicker class="date" ref="datepick"></datepicker>
</div>
<style scoped>
.datePickerDiv {
position: relative;
浏览 0提问于2020-07-06得票数 2
回答已采纳
1回答
我有一个表单，我需要发送未转换的值，但我也需要从Vue获得翻译出来的值，以便将它们写在页面中。
现在，我创建了一个“影子”属性，并通过watch函数对其进行了更改。请注意，我是通过自定义的ref支柱和Vue.$refs引用SELECT。所以：
//[...]然后在Vue：var vueapp = new Vue({
el: '#form'
,data:{
form:{
,screw:{
type: "Svasata Piana"
,type_t: "Svasata Piana"
浏览 0提问于2018-07-04得票数 3
1回答
chartjs v3.7.1
vue-chartjs v4.0.4
在vue-chartjs的第3版中，我可以使用this.$data._chart引用图表对象，因为该组件是从图表组件扩展的。
但是在第4版中，它只是直接使用图表组件，如何获得图表对象的引用？我尝试了:ref指令，但它只返回dom元素，而不是图表对象。
我找不到4.0.4版本的例子
浏览 12提问于2022-04-05得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
