为什么我返回到上一步时没有显示v-show？
问题：为什么我返回到上一步时没有显示v-show？
回答： v-show 是 Vue.js 框架中用来控制元素显示和隐藏的指令。它通过控制元素的 display 属性来实现显示和隐藏的效果。当 v-show 的表达式结果为 true 时，元素会被显示，当结果为 false 时，元素会被隐藏。
如果在返回到上一步时，v-show 指令没有起作用，可能有以下几个原因：
- 条件表达式问题：首先需要检查 v-show 的条件表达式是否正确。可能存在错误的逻辑或者条件判断问题导致 v-show 的结果不是预期的。可以通过输出调试信息或者查看控制台报错信息来定位问题。
- 数据更新问题：v-show 的显示和隐藏是依赖于数据的变化的。如果在返回上一步的过程中没有更新相关的数据，那么 v-show 的效果可能无法触发。可以通过检查数据是否正确更新来解决该问题。
- 元素结构改变问题：如果在返回上一步的过程中，涉及到页面元素结构的改变，可能会导致 v-show 失效。例如，如果返回上一步时，通过 JavaScript 动态创建或者删除了某个元素，那么该元素上的 v-show 可能会失效。可以通过调整代码逻辑或者重新绑定 v-show 来解决该问题。
- 组件生命周期问题：如果 v-show 的元素是一个 Vue 组件，那么在组件的生命周期中可能存在某些钩子函数没有正确触发导致 v-show 失效。可以通过检查组件的生命周期函数是否正确执行来解决该问题。
综上所述，返回到上一步时 v-show 无法显示的问题可能是由于条件表达式问题、数据更新问题、元素结构改变问题或者组件生命周期问题所致。需要仔细检查代码逻辑，确保条件表达式正确，数据能够正确更新，元素结构没有异常变化，并且组件的生命周期函数能够正确触发。如果问题仍然存在，可能需要进一步调试或者查阅相关文档来解决。
相关·内容
1回答
我正在构建nuxt.js SSR网络应用程序，我面临着奇怪的问题。
<div class="container" @mouseenter="hovered = true" @mouseleave="hovered = false">
<transition name="fade">
<div class="class1" v-show="!hovered && isDesktop">blank_1</div>
</
浏览 0提问于2018-03-20得票数 3
3回答
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<p v-show="show">test</p>
<button v-on:click=
浏览 3提问于2021-04-12得票数 0
回答已采纳
做v-show来基于index切换元素的最佳解决方案是什么，但是当您单击当前打开的元素时，我成功地完成了切换部分--它不会关闭。
<div v-for="(btn, index) in dataArray">
<button @click="toggle(index)">{{ btn.name }}</button>
<p v-show="isOpenIndex === index"> {{ btn.desc }} </p>
</div>
如果
浏览 2提问于2018-08-09得票数 1
回答已采纳
1回答
经常需要重建项目
、、
当我在IDEA12中运行编译时，我经常收到关于不存在100个错误的消息(似乎是显示的最大错误数)：例如，Blabla.java找不到symbol: class Blabla1，但是当我在集成开发环境中打开这个文件时，我没有看到任何编译错误。为了消除这个错误，我应该重建项目，然后我就不会得到上面的错误。我在IDEA11中没有看到这样的错误。有没有人能解释一下为什么会出现这个错误？
对不起，我的英语不好。非常感谢!
浏览 0提问于2013-03-22得票数 3
回答已采纳
我有一个简单的表单，它在页面加载时被隐藏，使用v-show。我想在显示输入后将其聚焦。我有一个按钮来调用一个方法，该方法显示表单并使用以下代码将焦点设置为输入：
this.newQuestion = true; //(Form whit v-show:newQuestion)
this.$refs.questionInput.focus();
问题是表单是正确显示的，但当我第一次按下按钮时，输入没有聚焦，如果当表单在页面中时，我再次按下它，它就可以工作了。我想知道是否有办法做到这一点，谢谢。
浏览 16提问于2017-08-23得票数 14
回答已采纳
2回答
如何显示或绑定每个列表元素的每个类？当我单击一个单独的列表元素时，它基本上显示了所有类，当我单击列表项时，它也消失了。因此，如何显示明智类的列表，假设当我单击报表项时，它将显示报表类。
<ul class="investor-item">
<li>
<a @click="mystock">Stock Information</a>
浏览 0提问于2018-05-17得票数 1
回答已采纳
我有四个按钮和相应的四个分区。在单击第一个按钮时，我希望显示第一个div，在单击第二个按钮时显示第二个div，依此类推。
单击事件按钮调用一个方法(从0到3)。
@click="showDiv(0)"表示第一个按钮，@click="showDiv(1)"表示第二个按钮。这是我的showDiv()方法showDiv: function(divNumber)
showDiv: function(divNumber)
{
this.showDetailsDiv.forEach(function(item, index, array) {
浏览 0提问于2019-03-27得票数 0
回答已采纳
我上传了一个图像，然后程序显示它:将上传的图像转换为base64，并将其放入img。我试图实现的是，在等待大图像转换为base64时，显示一个进度条。
我试图在转换之前显示进度条，然后在完成后隐藏进度条。
<div>
<v-avatar v-if="editedItem.image" class="mt-3" :tile="true" :size="250" color="grey lighten-4"><img :src="editedItem.image" a
浏览 0提问于2019-07-15得票数 0
现在，我想实现当单击按钮旋转允许图标。从下到上，从上到下，在旋转运动中。
现在我的代码是
<template>
<v-btn v-on:click="isShow = !isShow">
<transition name='rotate'>
<v-icon v-if="!isShow">
mdi-menu-down
</v-icon>
</transition>
<v-icon v-show=&#
浏览 8提问于2021-12-13得票数 0
回答已采纳
2回答
我希望在一个组件中有多个下拉列表，使用一个变量来显示或不显示，并单击它们的div关闭它们：
<div class="dropdown">
<button @click.prevent="isOpen = !isOpen"></button>
<div v-show="isOpen">Content</div>
</div>
// second dropdown in same component
<div class="dropdown"&g
浏览 4提问于2021-06-10得票数 2
回答已采纳
我几乎什么都试过了，但我想不出一种办法使它真正地发挥作用。
我有什么？
具有table和4 div的索引页(未显示)；
4具有某些内容(图)的html页面。
我想要什么？
每个div包含一个相应的html文件。当我单击该表(“标题”之一)时，将显示div
结果是什么？
基本上，所有的html页面都加载在同一个div中。另外三个是空白的.。
有什么奇怪的？
当我加载“普通”页面(没有图形d3js)时，它工作得非常完美.我想这一定是加载图形时遇到的问题，谢谢您的帮助:)
以下是代码：
<body>
<div id="app">
浏览 0提问于2019-07-25得票数 3
回答已采纳
如果我这么做：
<div class="panel panel-default" v-if="socialiteLogins !== null">
面板不隐藏。如果我单独检查socialiteLogins === null，或者使用==，它们都会返回对象不是null。但绝对是空的。如果我把它转储到页面上，结果就是[]。它是一个空的json对象。所以如果我尝试这个：
<div class="panel panel-default" v-if="socialiteLogins.length !== 0">
面板
浏览 9提问于2016-11-23得票数 13
回答已采纳
我在Vue中有以下代码，用于单击事件，但不工作或键盘事件：
<span v-show="show" @click.prevent="backTo" @keyup.enter="backTo" @keyup.space="backTo">
我已经将backTo()方法设置为转到上一页，但是当我使用键盘事件时，它什么也不做。按一下它就可以正常工作了。
我在方法中放置了一个警报，以了解它正在做什么，但是在键盘事件上它什么也不做，onmouseclick我得到了警报。
浏览 5提问于2022-06-27得票数 0
我有这个html代码
<tr v-for="(help, index) in helps">
<td scope="row">{{ help.ID }}</td>
<td scope="row">{{ help.Date | formatDateWithTime }}</td>
<td>
<p @click="fullTextFun(index)" v-show="help.FullText">
浏览 1提问于2019-05-17得票数 2
回答已采纳
使用，一个用于表单验证的Vue.js插件，我想在输入字段验证通过后显示一个图像。正如您所看到的，我曾尝试使用v-show="!errors.has('fname')"完成此操作。问题是，图像在验证发生之前就已经显示了，因为那时没有错误。当对应的输入字段有效时，如何显示图像？
<form>
<input v-validate="{rules: {required: true, alpha: true, min: 3}}"type="text" id="fname" name="fname
浏览 14提问于2017-02-03得票数 0
在我的Vue js项目中，我想在API中显示特定数据的长度，当我编写下面的代码时，我得到了状态sold length =5次重复5次，而我只想显示一次，比如5次，有什么方法吗？
<span class="text-success mr-2" v-for="(flatno,index) in Flats "
:key="index" v-show="flatno.status ==='sold'" >
{{flatno.status.length}}
</span>
浏览 4提问于2021-12-30得票数 0
回答已采纳
1回答
我正在尝试使用中描述的“简单”结账功能将条纹与我的网站集成起来。我已经创建了一个摘要页面，我在上面添加了脚本标记。这显示了Pay With Card，它工作正常。
但是，我需要在此摘要页面上的“取消”或“后退”按钮，以便让用户有机会返回到上一页或取消在线预订。但是，即使单击了另一个按钮，支付弹出窗口也会打开，并且不会引发back按钮事件。
我遗漏了什么？为什么甚至其他按钮都被条纹JS劫持了。请帮帮忙。
浏览 2提问于2018-11-12得票数 0
<template lang="pug">
.modal-task(:style="{display: showDetailsModal}")
.modal-task-details
.task
.description(v-show="show")
|description: {{task.description1}}
.text(v-show="!show")
textarea(v
浏览 1提问于2021-12-16得票数 0
1回答
在我们的we应用程序中，我们经常显示从AJAX调用返回的数据的图形或3D渲染。
在用户单击按钮并从服务器返回JSON之前，还没有显示包含图形或3D模型的div，例如，通过使用v-show属性设置div：<div id="graph" v-show="data.show_graph"></div>
这种方法的问题是，图形库，如highcharts或plotly，需要显示此div以获取div的高度和宽度，以便开始构建图形。但是，即使我们首先将v-show标志设置为true，它的渲染速度也不够快，因此图形javascript代码可以使用div的
浏览 0提问于2018-04-12得票数 0
我有一个动态的表格呈现，其中表格的列和行都是动态呈现的。
因此，在这里，我的每一行都有两个兄弟<td>元素：
<td :key="`td3-${index}`" :id="`show_${key}`" v-show="`show_${key}`">
<input type="text" :v-model="key" :name="key" :value="entry[key]" />
</td>
<td :key="`
浏览 40提问于2019-11-13得票数 2
回答已采纳
我正在使用WF4和asp.net。我想编辑工作流程(回到上一步)，并在Instancetable中更改数据，但我不知道。我的目的是在不更改自动更新的sql中的工作流设计器和表的情况下，撤消到上一步。我的想法是在InstancesTable中更改复杂数据属性中的数据，但我不能.I想要一个在不更改工作流设计器的情况下编辑先前活动的解决方案，并希望当返回到上一步时，表更新。另一方面，例如，当activity3不执行时，我想不带任何条件地从活动3返回到活动1。
浏览 0提问于2012-12-05得票数 1
我试过这个例子 <div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-show="show">hello</p>
</transition>
</div> 它起作用了!但是当我用div替换元素p时，它不起作用！ <div id="demo"&
浏览 7提问于2019-05-13得票数 0
我有一份房产清单(房屋，公寓，.)我和Vue一起呈现的。
每个属性都会根据一些按钮显示或不显示，这些按钮就像过滤器一样。这些“过滤器”是在我的数据对象中设置的：
data: {
properties: myPropertiesList,
rooms: {
1: false,
2: false,
3: false,
4: false,
},
type: {
flat: false,
house: false,
field: false
}
},
浏览 1提问于2016-03-16得票数 4
我有很多元素(大约30个)可以在点击时切换(隐藏/显示)。我使用v-show指令，但我需要事先声明所有变量的名称。如果我不声明他们，v-show就不能工作。这是不切实际的，因为每次元素更改时，我都必须在模板和列表中更改它们。 有没有一种方法可以在Vue中实现这一点，而不需要预先声明变量，或者我必须在纯JavaScript Toggling many div id中执行类似于下面答案中的操作？
浏览 45提问于2020-04-09得票数 0
回答已采纳
我有一个有行的表格。行在可点击的tbody中，我想在点击的行下以列表的形式显示额外的一行，上面有更多的信息。
如果再次单击该行或“list- row”，则“list-row”将再次隐藏。
我的实现是在原始行下创建“list- row”并隐藏它。如果按下tbody (在tbody内有两行，原始行和相应的'list- row )，则会切换额外的行。
现在，它们都是隐藏的/显示的是按下的，因为我只有一个控制按下/未按下的布尔变量。我在考虑用vector代替。这可以通过对数组生成clickStatus并用v-show="clickStatus[indexa]"替换v-show=
浏览 0提问于2016-08-05得票数 0
我想在表格行中设置多个“就地”可编辑的日期字段。下面的单个字段的示例是有效的。我将当前日期(oldDate)显示为标签。用户点击“更改”，会出现一个输入字段，编辑后用户可以接受或取消。 https://jsfiddle.net/asrajan55/qv6crg84/ <div id="root">
<label>Test Date:</label>
<span v-show="!makeEditable"> {{ oldDate }} </span>
<span v-sh
浏览 13提问于2019-02-09得票数 1
回答已采纳
2回答
我尝试使用字体可怕的眼睛图标显示和隐藏密码时，用户试图登录。图标确实显示，但我无法显示输入的字符。有人能帮帮我吗。
下面是我使用的用于密码的html代码。您可以在within和@click函数中看到的密码是javascript中的一个空字符串。
如果有人能帮我做这件事的话，我会非常感激的。
HTML：
<div class="passwordInputArea">
<span class="passwordEye" v-show="password">
浏览 3提问于2018-06-02得票数 1
这里的一般问题与特定的代码段无关:我需要知道一个元素的坐标才能向下滚动到它。 该元素具有v-show条件，并且在页面加载时被隐藏，但是用户可以单击一个按钮来显示该元素(通过满足v-show条件)。 问题:如果在用户单击按钮时立即计算元素的坐标，则无法获得正确的坐标。我必须用setTimeout()等待一两秒钟，才能最终获得正确的坐标。 问:有没有办法让Vue尽快做到这一点，而不是让它等待一段随意的时间？
浏览 15提问于2020-01-15得票数 0
1回答
我有一个组件，其中有3个按钮。2最初是可见的
<template>
<button v-show="!showLogout" @click="login('google', 'profile, email')">
Google
</button>
<button v-show="!showLogout" @click="login('facebook', 'email')">
Faceboo
浏览 5提问于2021-09-23得票数 1
回答已采纳
1回答
我只是学习vue.js，我想显示一个表格data.my意见是当显示模式的表格刚刚显示。当我单击表格行的编辑按钮时，我希望此行转换为model。
这是我的代码：`
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>pass</th>
<th&
浏览 6提问于2016-09-24得票数 2
回答已采纳
我有一个数组的DIVs，我需要在旋转的基础上显示：
<div v-for="(part, index) in verses" :key="index"
v-show="showSlides[index]">
<pre>{{ part }}</pre>
</div>
下面是相关的vue.js代码：
data: {
verses: ['first line', 'second line'],
showSlide
浏览 0提问于2018-03-26得票数 0
回答已采纳
3回答
我有一个SAP在VUE中，由4个步骤组成的表单。当在第一步按钮中提交并重定向到第二步时，如果我返回到第一步，最后一个组件将停止显示，尽管在更改组件之前显示。这是我的模板 <input
type="text"
id="animalName"
ref="animalName"
v-model="animalFormInfo.name"
@keypress="onChangeName($event)"
@keyup="onCha
浏览 39提问于2020-10-08得票数 0
回答已采纳
当使用白色无线电(v- v-show )时，显示为无效。请查找示例：
<div id="helloWorldApp">
<input type="radio" v-model="visible" value="true" name="optradio">hide
<input type="radio" v-model="visible" value="false" name="
浏览 5提问于2019-10-11得票数 3
1回答
我正在尝试使用进行表单验证，并在元素有效时通过ajax提交。但是我不能通过验证部分。
我的html：
<div id='form' 'v-on'="change:updateForm">
<form>
<select id="selects" name="selected_id" v-model='form.selected_id | selectValidator'>
<option value="">Plea
浏览 1提问于2014-07-20得票数 1
我使用下面的代码来显示网页
Uri uri = Uri.parse("http://myurl");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
但是，当我单击后退按钮导航到上一页时，它并没有加载上一页，而是加载了同一页
某些urls并不是所有的urls都会发生这种情况
为什么会发生这种情况？有什么解决方案吗？
浏览 2提问于2010-12-23得票数 4
回答已采纳
1回答
我有一个从JUnit测试调用的流。当一个方法被调用时，我需要没有任何错误地中断流，并从该方法返回某些参数。
例如。
breakThisMethod(String s1, String s2);
在执行流程时，我需要中断流程，并在遇到上述方法breakThisMethod(..)时终止。另外，如果可能的话，我可以将参数s1，s2返回给测试类。
浏览 0提问于2016-01-06得票数 0
<template lang="pug">
.modal-task(:style="{display: showDetailsModal}")
.modal-task-details
.task
.name(v-show="show")
|Name: {{task.name}}
.text(v-show="!show")
textarea(v-model='task.name&
浏览 3提问于2021-12-16得票数 1
回答已采纳
为了在VueJS应用程序中显示加载状态，我使用库NProgress。它运行良好，并显示了加载杆和旋转轮。但是，页面的HTML内容已经呈现并显示。我想在请求运行时隐藏页面的某些部分。 有没有可能以编程方式检查NProgress.done()并在调用后显示内容？ 我想要这样的东西： <template>
<div>
<NavBar />
<div v-show="check here for NProgress.done()">
<p>Here are al
浏览 22提问于2020-12-26得票数 0
回答已采纳
因此，我正在学习vue，并且花了一些时间浏览文档，还没有看到解决我问题的答案。这在很大程度上是由于使用CLI(我是)和不使用CLI之间的命名。
我试图使它，当一个单选按钮被点击，它显示一个div，当另一个被点击，它显示另一个。这是我所拥有的。
模板：
<div id="daySelection">
<div class="o-m-day">
<div id="oneDay">
<p>One day?</p><input v-model
浏览 0提问于2019-01-03得票数 0
回答已采纳
1回答
我有一个嵌套的、可重用的vue组件。我正在尝试使用v-show在组件的外部父组件悬停时显示组件的一部分(图标)。为了实现这一点，我将父索引和子索引作为props进行传递，但是当子元素悬停时，我的父元素将为v-show返回true。我能做些什么来解决这个问题呢？
<div v-for="course, index in courses">
<!-- hover me -->
<div class="header" @mouseover="setShowIndex(index)" @mouseout="
浏览 12提问于2020-02-10得票数 0
我的应用程序有点小问题。只有在输入集中时，我才会显示搜索建议，使用v-show和@聚焦，如下所示
//input
@focus="shouldShowSuggestions = true"
@blur="shouldShowSuggestions = false"
//suggestions div
v-show="shouldShowSuggestions"
当我专注于输入时，建议会被正确地显示出来，但是当我试图点击一个建议时，链接就不会被点击，建议也会因为我的@blur而消失。
我知道这个问题，但我不知道如何处理。有什么想法吗？
我用这个问
浏览 0提问于2018-06-20得票数 4
回答已采纳
在使用名为的vue组件进行可切换导航时，我遇到了问题。当导入的组件isActive中的数据是使用v-show的真时，我想显示我的菜单，但似乎找不到获取数据的任何方法。
我试图包含v-show="isActive"，但它似乎没有从isActive汉堡组件的数据中获得变量。
到目前为止，我就是这样做的：
<transition name="fade">
<div v-show="isActive" class="menu">
<transition-group name="list&#
浏览 0提问于2019-05-03得票数 0
回答已采纳
3回答
在div中有两个components，当两个components一起渲染时，我点击了button来正确切换，但在只渲染一个组件的情况下，切换变得异常。 这是我的代码 Base.vue <template>
<div :id="id">{{msg}}</div>
</template>
<script lang='ts'>
import { Component, Prop } from "vue-property-decorator";
import Vue from "v
浏览 15提问于2020-07-21得票数 1
1回答
谢谢@zero298，dup并不在重要的方面适用。我想显示对象数组中的所有项，只是根据用户信号有条件地向每个条目添加一些UI。此外，v-if和v-show是非常不同的(正如这里和其他地方所指出的)。这个网站上的vue q/a似乎很轻--因为它是新的--似乎在这样一个新的话题上积极地关闭似乎是一个错误。
我可以用这种方式表演..。
(注.请在“展开片段”模式下运行代码段，以查看控制台内容上的行为。不确定如何在控制台中抑制vue消息)
const app = new Vue({
el: '#app',
data: {
show: false
},
met
浏览 0提问于2019-02-27得票数 1
回答已采纳
3回答
相对新手的Vuejs。我正在使用Animate.css库进行我想要的转换。
它基本上是一个4列和8列的布局，当我滚动时，它变成了1和11。
它在没有过渡的情况下工作得很好，但整体效果并不令人愉悦。
<div class="column is-4 is-hidden-touch" v-show="! isScroll">
<navcomponent :navScroll = "isScroll"></navcomponent>
</div>
<div cl
浏览 9提问于2017-06-28得票数 2
回答已采纳
CodeExample如何使用Vue.js获取样式显示值(none/block)？jsfiddle示例：https://jsfiddle.net/DevCccc/52xqe8mv/ <div id="app">
{{count}}
<ul ref="mylist">
<li v-show="true">1</li>
<li v-show="true">2</li>
<li v-show="false"&g
浏览 23提问于2019-09-13得票数 0
我尝试使用v-if和v-show来显示两个不同页面的内容。如果单击按钮A，将显示页面A的表格；如果单击按钮B，将显示页面B的表格。但是使用我现在的代码，当单击按钮B时，两个页面都会显示。我如何才能根据所单击的按钮获得正确的页面？我正在考虑使用v-if/else，但我不确定如何使用。 我的代码： <template>
<v-main>
<v-row align="center" justify="space-around">
<v-col class="text-center" cols="
浏览 25提问于2020-09-22得票数 0
回答已采纳
1回答
我使用的是两个组件和两个模板的Vue.JS。它们被多次使用：
<compone v-show="! showcompone"></compone>
<compone v-show="! showcomptwo"></compone>
和
<comptwo v-show="! showcompone"></comptwo>
<comptwo v-show="! showcomptwo"></comptwo>
我的论调如下：
new Vue
浏览 5提问于2016-05-02得票数 0
回答已采纳
1回答
我假设v-show将根据其传递的数据显示/隐藏元素。 由于某些原因，当v-show为false时，我的元素不会动态隐藏。当我手动将变量(showNav)更改为false时，它将在页面加载时被隐藏，因此它看起来运行正常。 我的变量(showNav)依赖于滚动。当向上滚动时，它设置为true，当向下滚动时，它设置为false。我希望我的导航栏隐藏在向下滚动，但这是不可能的。 滚动行为运行正常。两者都正确地将我的v-show变量(showNav)更改为true或false，但元素始终保持可见。 HTML模板 <template>
<div id="home-pag
浏览 120提问于2021-11-15得票数 2
回答已采纳
我希望实现自定义组件，如下图所示：
ps:它实际上是元素()的一个组件。
当我移动我的鼠标在图片上，它显示一个半透明的背景。
所以我写了代码：
<div id="app">
<div>
<div class="container" v-for="n in arr.length" :key="n">
<!-- unexpected result -->
<div v-show="arr[n-1]" >test&
浏览 0提问于2019-07-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
