如果vuejs2 v-for为空，如何显示引导警报？
如果vuejs2 v-for为空，可以通过以下方式显示引导警报：
- 在Vue组件中，可以使用v-if指令来检查v-for循环的数据是否为空。例如：
<template>
<div>
<div v-if="items.length === 0">
<p>暂无数据，请添加数据。</p>
</div>
<div v-else>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [] // 假设这是从后端获取的数据
};
}
};
</script>在上述代码中，我们通过判断items数组的长度来决定是否显示引导警报。如果items为空，就显示提示信息；否则，就渲染列表。
- 另一种方法是使用计算属性来判断数据是否为空，并在模板中使用该计算属性。例如：
<template>
<div>
<div v-if="isEmpty">
<p>暂无数据，请添加数据。</p>
</div>
<div v-else>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [] // 假设这是从后端获取的数据
};
},
computed: {
isEmpty() {
return this.items.length === 0;
}
}
};
</script>在上述代码中，我们定义了一个计算属性isEmpty，它会根据items数组的长度返回一个布尔值。根据该布尔值来决定是否显示引导警报。
以上是两种常见的处理方式，根据具体情况选择适合的方法。在实际开发中，可以根据需求进行适当的调整和扩展。
相关·内容
1回答
用vuejs显示错误警报
、、、
我想用引导程序显示错误警报，我如何处理vuejs？
这是我的密码：
<div v-if="this.getError">
<div v-for="(_errors, key) in this.getError">
<p>{{key.replace('contract_data.','')}}</p>
<ul>
<li v-for="error in _errors">{{error
浏览 3提问于2021-12-15得票数 -1
回答已采纳
我正在寻找显示引导警报，如果v-for返回没有行，它出现与v- if ="!records.length"，但问题是，警报总是显示在页面加载！ <tbody>
<tr v-for="record of records" :key="record.id">
<td class="text-nowrap">{{ record.last_name }} {{ record.first_name }}</td>
<td class="text-nowrap"
浏览 56提问于2019-05-11得票数 0
1回答
我从数据库获取数据，并尝试使用vuejs2显示在表中，如下所示。在这里，我希望在obj中有一个特定值的continue (编程继续)。如果是key == id，我不想创建td。
<tbody>
<tr v-for="obj in gdata">
<td v-for="(value, key) in obj">
<template>
浏览 3提问于2018-01-31得票数 1
回答已采纳
假设我有一组车，我想一次显示每一行.3秒。我如何在Vuejs2中做到这一点？
<tbody>
<tr v-for="(car) in cars">
<td><img v-bind:src="car.photo" width="40px" height="40px" alt=""></td>
<td><router-link :to="{path:'/car/' +
浏览 0提问于2018-03-31得票数 2
回答已采纳
1回答
我试图使用下面的来使用axios在vue中填充一个表。
如何添加筛选器和搜索栏？我似乎无法添加v-for="post in posts | filterBy search。其中搜索是<input>的v模型。我看到了一些文档，说明这在vuejs2中是不可用的。除了v-for指令之外，我还可以在<table>标记中使用哪些其他指令来支持vuejs2中的filterBy？
我是否还可以使用axios的另一个指令？
如果我有一个来自rest的结构json，我如何使用像这样的东西并通过解析json来增加值呢？
浏览 4提问于2017-10-05得票数 1
嗨，im试图从vuejs2数组中删除元素，这是我的html代码。
<tr class="o_data_row o_selected_row" v-for='(line , id) in lines'>
<td>anything here</td>
<td class="o_list_record_remove" style='width:10%'>
<button @click='remove_line(id)' class=&#
浏览 4提问于2020-04-18得票数 1
回答已采纳
1回答
我在用回形针，铁轨和vue。我的问题是如何使用vuejs2获取图像的url
app.js
var posts = #{ sanitize @posts.to_json }
var app = new Vue({
el: '#app',
data: {
posts: posts
}
})
app.haml
#app
%div{ 'v-for' => 'post in posts' }
%img{ ':src' => 'post.ava
浏览 0提问于2018-04-23得票数 0
回答已采纳
我正在尝试使用VueJS与Bootstrap 5的。我在其中一个手风琴项目上添加了v-for指令，它“排序”works....but样式有点偏离。例如，所有手风琴项目在开始时都显示为“活动”。而且，在开始的时候，第一个手风琴应该打开而不是关闭。
我用VueJS和Bootstrap5设置了一个代码框，您可以看到我所做的尝试。但是，我的尝试并不像Bootstrap5文档示例。
我的尝试：
我如何正确地使用Vue来制作一个相同的Bootstrap 5手风琴组件，如中所示，该组件显示在开始时打开的第一个手风琴，并在单击时正确地突出显示活动手风琴？谢谢!
浏览 1提问于2021-07-19得票数 0
回答已采纳
1回答
我有一个新的反应项目与webpack，并试图添加“反应-引导”，并提出警报作为一个测试。
所以我做了：
npm install react-bootstrap --save
已经确认了文件在那里。在我的主要tsx文件中，我有：
import { Alert } from 'react-bootstrap';
...
<Alert variant='success'>Success Alert</Alert>
当我运行npm开始启动我的服务器时，它会显示页面上的成功警报，但是webpack的错误与以下错误有关：
[tsl] ERROR in
浏览 0提问于2019-09-13得票数 5
我有一个选项列表，其中一个选项被选中。如何在Vuejs2中测试，并将适当的设置为选中。例如，希望将每瓦特设置为下面的checked ()
html：
<div id='app'></div>
Vue应用程序：
new Vue({
el:"#app",
template:`<div>
saying hello
<div>{{selected_unit}}</div>
<div class="radi
浏览 1提问于2017-10-07得票数 1
回答已采纳
我很难在HTML表中正确显示一些计算出来的数据。如何用来自我的x方法的值替换表中的filteredFieldsWithOldValues()占位符内容？
让我解释一下。
我有这样的数据：
代码箱工作演示：
{
"name": "Canada",
"entryType": 2,
"shortName": "CanadaEH",
"shortName_old": "Canada",
"fullName": "The NEW Republic o
浏览 2提问于2021-09-14得票数 1
回答已采纳
如何获取JSON对象的键并将其显示在下面hTML表的<th>部分？ 例如，我有一个JSON对象： myData.JSON { "entryType": 2, "name": "JOHN", "name_old": "JOHNNY", "shortName": "Jonny", "shortName_old": "Jon" } 然后，我的HTML表如下所示： <table>
<thead
浏览 22提问于2021-09-12得票数 0
我有以下vuejs代码：
<select v-model='selectedInverter' class="custom-select" @change="changedInverter">
<option>Select an inverter</option>
<template v-for="inverter in localInverters">
<option>{{inverte
浏览 6提问于2017-09-29得票数 0
回答已采纳
我正在使用引导、php和mysql作为一个应用程序。这样，每当用户登录时，管理员将向所有用户发送消息，这些消息将作为警报显示在页面上。下面是我的ajax代码：
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#admin_message').hide();
},
complete: function() {
$('#admin_message').show();
浏览 1提问于2015-02-19得票数 1
回答已采纳
4回答
使用jQuery引导错误警报
、、、、
我试图使用引导警报来显示错误警报消息。如果用户提交的表单中某些字段为空，则应显示错误。但是，当我单击“提交”时，不会显示任何内容。
JS
<script type="text/javascript">
$(document).ready(function () {
$('form[name="register"]').on("submit", function (e) {
var email = $(this).find('input[name="email"]');
浏览 2提问于2014-06-05得票数 0
回答已采纳
3回答
我正在使用laravel5.5、vuejs2和lodash项目。我想跳过结果中的第一个数据，如下图所示。这是我的vuejs2代码。
new Vue({
el:'#users',
data:{
message:'',
ok:false,
noresult:false,
arrayresults: [{id:'' ,username: '',useremail: '',userphone:'',}],
},
methods:{
searchData: _.de
浏览 0提问于2017-12-19得票数 7
回答已采纳
1回答
我试图通过使用搜索栏来过滤数组，这个数组是在v-for中循环的，我不知道为什么所有东西都会消失，我目前正在循环函数searchedRestaurant()。这就是我得到的错误: this.all_restaurants.filter不是一个函数。这是我的密码：
<div class="col" v-for="(restaurant, index) in searchedRestaurant()" :key="index">
data() {
return{
all_categories: {},
浏览 1提问于2022-04-22得票数 0
1回答
如何使用“显示警报按钮”来响应引导警报？需要默认页面加载可见的警报框。
function Alerts(props) {
const [show, setShow] = useState(true);
if (show) {
return (
<Alert variant="danger" onClose={() => setShow(false)} dismissible>
<Alert.Heading>Oh snap! You got an error!</Alert.Heading>
浏览 4提问于2022-03-28得票数 0
我使用的是针对引导引导( v3 )的react引导，我使用警报组件向用户显示消息。
此外，我需要用多行显示消息。我用的断线。
如果我“硬编码”警报组件中的多行文本，则组件正在按预期工作，显示多行。
但是，如果我使用一个属于父组件状态的变量，它将无法工作。
这种行为的原因是什么？
class MyAlert extends React.Component {
constructor(props) {
super(props);
this.state = {
message: "Hello <br /> world! <br /> T
浏览 0提问于2018-12-08得票数 1
回答已采纳
1回答
如何使用javascript而不是javascript警报提示符隐藏和显示引导警报我想使用引导警报
在我问这个问题之前。我找过怎么做了，但没找到！
谢谢
这是aspx代码。
<div class="alert alert-danger" role="alert" id="alertname" runat="server" visible="false">
<span class="glyphicon glyphicon-exclamation-sig
浏览 0提问于2015-10-25得票数 0
我在学习vuejs2的时候有一个问题
我用slot-scope && v-for做了一个例子，但是它有一个我不能理解的错误。
以下是示例代码
app.vue
<template id="list-template">
<div>
<ul>
<slot name="row" v-for="item in list" v-bind=item />
</ul>
</div>
</template>
<div i
浏览 1提问于2018-04-02得票数 0
我对vuejs很陌生，并试图在我的应用程序中访问防火墙实时数据库。
signup.vue
<template>
<div>
<p v-for="(data,index) in fbData" :key="index">{{data.id1}}</p>
</div>
</template>
<script>
import { validationMixin } from 'vuelidate'
import { required, email
浏览 2提问于2018-10-15得票数 0
3回答
因此，在我的一个VueJS模板中，我有一个左边栏，它通过迭代(v-for)多维items数组来生成按钮。
当单击其中一个按钮时，将运行一个方法：
this.active.notes = item.notes
active.notes绑定到右侧内容部分中的文本区域。
因此，每次单击其中一个项目按钮时，您都会看到与该项目关联的(活动)备注。
我希望能够让用户编辑文本区域中的活动注释。我在textarea blur上有一个AJAX调用，它会更新数据库。但问题是，items数据并没有改变。因此，如果我单击不同的项目，然后单击返回到已编辑的项目，我会看到预先编辑的备注。当然，当我刷新页面时，一切都会完美
浏览 0提问于2017-03-03得票数 2
1回答
分页参考
currentPage: 1,
perPage: 3,
computed: {
paginatedItems() {
return this.productsList.slice(
this.currentPage * this.perPage,
(this.currentPage + 1) * this.perPage
);
}
rows() {
return this.productsList.length;
},
},
<div class="overflow-auto&
浏览 2提问于2021-05-14得票数 1
回答已采纳
这是我的，我试图在单击事件时将引导程序警告覆盖在引导程序上，但没有显示“警告-可忽略”关闭框！我如何才能显示这一点，以及当可忽略警报的'x‘被单击时，我如何隐藏警报消息？
$('.well').on('click', function() {
$('.alert').show();
$('.alert').addcss('z-index: 1'); //.addClass('position: absolute');
})
.well,
.alert {
position:
浏览 2提问于2015-09-14得票数 1
我可以知道如何将子组件中输入的所有数据提取到父文件中吗？
index.html
<form v-on:submit.prevent="onSubmit">
<div class="form-group" v-for="n in 4">
<food :lists="foodLists"></food>
</div>
<button type="submit" class="btn btn-primary
浏览 6提问于2017-08-04得票数 2
我已经导入了引导程序，我正在使用‘引导-sass’创业板和设计创业板。问题是我的rails应用程序显示了正确的消息，比如如果我登录了，而我尝试注册，它显示消息‘您已经登录了’。但没有颜色周围的信息，如黄色或红色或任何颜色。
<div class="container">
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-#{name}") %>
<% end %>
</div&
浏览 4提问于2014-09-17得票数 1
回答已采纳
在我的laravel/刀片应用程序中，当我需要用parent_id显示产品的注释时，我编写了一个自身递归调用的函数，如
public function showCommentItem( $commentsList, $parent_id, $product_id, $deeps, $backend_home_url, $images_dir, $current_template )
{
$ret_html= '';
$ret_html.= '<ul class="p-b-30">';
foreach( $com
浏览 1提问于2020-06-29得票数 0
回答已采纳
我收到了一个数据api的响应，并希望在表中显示vuejs的结果。这很好，直到一些参数丢失。
那么，当这个{{ sp . article_data . desc_de }}未定义时，我如何跳过v-for中的整行呢？或者，除了空/空值之外，如何显示结果？
Backgrund信息:当与不完整的数据发生冲突时，sp.article对象将完全丢失。像{{ sp . name }}或{{ sp . type }}这样的参数总是可用的。
浏览 3提问于2022-07-18得票数 0
1回答
无法在快速应用程序中获得停职警报
、、、、
当我将其包含在node.js应用程序中时，我不会收到引导程序中显示的解雇警报，所以请帮助我。
下面附上一张图片，这是我的文件结构：
下面是我的样板代码的图片：
下面是我的文件，其中包含了引导解除警报：
以下是我的“解雇警报”的输出：
忽略取消警报消息，因为我暂时保留了该消息。
如你所见，我没有得到按钮来关闭警报，请有人帮助我。
浏览 7提问于2022-05-08得票数 0
我在用vuejs假设我有select，内部有多个选项，如下所示：
<select v-model='line.unit' name='unit[]' required @change='change_unit($event)'>
<option v-for='(unit) in line.units' price='line.price' :value='unit.id'>@{{unit['get_unit_id']['name']}
浏览 1提问于2020-05-19得票数 1
回答已采纳
目前，我正在使用Vuejs2生成用于图像上传的列表，它将在选择图像文件后显示预览图像，下面是我用Vuejs2：编写的代码
<div v-for="(image, index) in images" :key="index">
<div class="image-upload">
<label v-bind:for="'cover-upload-' + index">
<img src="http://via.place
浏览 1提问于2017-10-19得票数 1
回答已采纳
这是我的代码：
<template v-for="day in getMonthLength()" >
<td :id='notempty' v-for="dataa in data" v-if="dataa.employee_id === employee.id">
<input type="number" :value="dataa.value">
</td>
浏览 3提问于2021-07-02得票数 0
1回答
我正在使用bootstrap 3警报来显示内联表单错误。为了方便起见，我可以使用以下CSS规则隐藏空警报：
.alert:empty{
display:none;
}
我想使用bootstrap的JS来消除这些警报。Bootstrap的示例标记如下：
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert&#
浏览 0提问于2014-12-14得票数 0
我正在尝试使用WebPack Encore在Symfony 4项目中包含BootstrapDialog。
首先，我将Bootstrap Dialog JS文件复制到所有其他JS文件所在的JS文件夹中。
其次，我在app.js文件中做到了这一点：
require('./bootstrap-dialog');
global.$ = global.jQuery = $;
alert(BootstrapDialog);
第三，我添加了这个内部引导对话框JS文件。
alert(BootstrapDialog);
注意app.js中的警报和引导对话框js文件中的警报。
引导对话框js文
浏览 2提问于2018-09-11得票数 1
1回答
有人知道如何在循环中插入命名槽吗？例如，我有这样的代码:孩子
<div v-for="num in nums" :key="num">
<slot name="foo"></slot>
</div>
而父母是这样的：
<foo-component :nums="nums>
<template slot="foo">
<span>Inside the foo component</span>
浏览 3提问于2017-11-02得票数 3
我对转角很陌生，试图弄清楚引导警报是如何在角中工作的。
在常规引导中，下面的内容给出了警告消息，当在X上单击时，它就会关闭。
<div class="alert alert-success">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Well Done!</strong> Your action is successful.
</div>
浏览 1提问于2014-08-06得票数 1
回答已采纳
以下是工作原理：
<li :key="index" v-for="(...) in items">
<input type="text" name="itemFields[]" v-validate="required">
</li>
// ...
<div class="vv-errors">
<ul>
// shows only for last active input
<
浏览 1提问于2019-03-19得票数 2
1回答
这是我在Vue.Js上的第一个项目。我无法使用v-for显示嵌套对象。当v-for在{{element.fist_name}}上使用时，它会打印空列表。
下面是我在jsfiddle上的代码。
浏览 6提问于2020-05-12得票数 1
2回答
在我的应用程序中，我在标题中使用引导闪存来显示所有通知/警报。
这是我的代码：
.col-md-8.col-md-offset-2
= bootstrap_flash
.clearfix
.row
= yield
我有一个投票控制器，我想在完全不同的地方显示它的警报，就在投票按钮本身旁边。
我如何“选择”哪一个具体的通知将从特定的控制器显示？
浏览 1提问于2016-06-24得票数 0
回答已采纳
我的项目总是用双密匙和TypeError发出警告:无法读取未定义(读取“表单”)警报的属性，但我不知道该如何解决，以及如何更改密钥？有人能帮我吗？
enter code here` vue.runtime.esm.js:619 [Vue warn]: Duplicate keys detected: '314'. This may cause an update error.
found in
---> <ElectricWV> at src/components/electric/Electric-WV.vue
<MainParam
浏览 2提问于2022-03-22得票数 0
回答已采纳
我使用API来获取用户。我希望将用户绑定到b-form-select (引导-vue)。但是在请求之后，我在b-form-select中看到了"null“。我的请求
getAllUsers() {
axios.get('/GetUsers')
.then(res => {
this.funds = res.data
console.log(this.options1)
浏览 2提问于2020-02-14得票数 2
回答已采纳
编辑:添加的实时代码编辑器：
我试图使用VueJS2和Wordpress REST过滤Wordpress JSON数据对象(在我的实际示例中有一个定制的post类型)。
我在连接上有问题，根据搜索框中输入的搜索词，让表过滤。
没有搜索函数的，一切正常工作，但是一旦我尝试使用搜索项进行筛选，什么都不会发生--控制台中没有错误.。
我的Vue实例是这样的：
var vm = new Vue({
el: '#app',
data: {
searchTerm: '',
posts
浏览 3提问于2017-06-27得票数 1
回答已采纳
我有一个这样的循环：
<ul class="menu-list" v-for="artist in artists">
<li> <a href="/artist/{{artist.artist}}">{{ artist.artist }}</a> </li>
</ul>
我的代码中的所有内容都运行得很好，但是/artist/{{artist.artist}}部分没有被计算出来。我只得到像/artist/%7B%7Bartist.artist%7D%7D这样的东西
浏览 0提问于2017-02-27得票数 2
Vue.js中的一个简单问题。在这段代码中，第二个"project“没有任何"Property"，显然没有"Number"，这使得html显示为空，当数组中没有数据时该如何处理？我试过v-if，但不能让它工作。谢谢 <div v-for="propiedad in info" class="propiedad">
<div class="propiedad">
{{ project.Property[0].Number }}
</div>
&l
浏览 50提问于2020-07-21得票数 0
回答已采纳
2回答
我正在尝试从php类中显示一个引导警报。为了使用HTML标记，我使用了echo。但是，警报显示在页面的底部，因此如何在标题下显示警报。
public function insert($userName,$email,$phone,$choise) {
$dhandller = "SELECT `email`, `phone` FROM `info` WHERE email = '$email' OR phone = '$phone' ";
$statements = $this->_dbHandle->prepare
浏览 1提问于2015-11-19得票数 0
1回答
我使用引导3与引导开关为校验和单选按钮。我试图提醒选定的值(当切换)，但没有警报。这是我的代码：
$(document).ready(function () {
$('#preAuth').on('switch-change', function (e, data) {
alert(data.value);
});
});
HTML
<div class ="form-group">
<label class="col-sm-3 control-label">Doe
浏览 2提问于2014-01-17得票数 1
回答已采纳
2回答
角带-警报不适用于指令
、、、
我编写了指令以在某些范围内显示通知:但是，引导带()警报服务没有向我的指令容器添加警报，为什么？
app.directive("notification", function ($alert, $rootScope) {
return {
restrict: "E",
template: '<div></div>',
link: function (scope, element) {
var id =
浏览 4提问于2015-06-05得票数 0
回答已采纳
2回答
如何显示未经筛选的元素的文本
、、、、
我正在尝试创建一个如下所示的日历：
正如您所看到的，我有“票证”对象，根据这些票的日期，我正在显示它们。我需要做的事，正如您在图片中看到的，我想显示一个文本‘没有可用的票证’时，它是空的。例如，星期一和星期二(实际上除了星期三以外的所有日子)。因此，为了取票，我正在过滤票：
findTickets(tickets, date) {
return tickets.filter((ticket) => {
return (
ticket.date.getDate() === date.get
浏览 4提问于2021-08-10得票数 0
回答已采纳
我的经理要求我复制引导警报功能。他基本上希望保持最小的文件内容。我已经能够复制警报显示，但是我不清楚如何在我的本地实现中复制close功能。我更喜欢使用使我的本地代码尽可能接近bootstrap实现。您知道bootstrap如何连接close按钮来发出警报吗?我是否可以轻松地将此实现复制到我的本地实现中？
浏览 3提问于2016-07-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
