我有这个清单:
<ul id="tab">
<li v-for="list in names">
{{ list.personName }}
</li>
</ul>
然后我有这个vue对象:
var vm = new Vue ({
el: '#tab',
data: {
names: //an object array coming from the server
}
});
因此,'名称'数据被更新并从服务器给出信息.但是,当更新/更改名称时,它不会反映在客户端列表中.列表中显示的项目仅反映最初加载页面时的项目.
在谷歌浏览器的vue.js开发人员工具中,我总能看到更新的"名称"数据,但它并没有反映在DOM本身.
编辑1:名称中有什么:
names: Array[2]
0: Object
_id: "580aeafd017fbfb81a3a794d"
personName: "hi"
1: Object
_id: "580c4455ccc9e39c21f02434"
personName: "test"
EDIT2
所以我正在使用node.js,并通过socket.io将数据从节点实时传输到客户端,如下所示:
socket.on('userDocument', function(userDocument) {
var vm= new Vue ({
el: '#tab',
data: {
names: //an object array coming from the server
}
});
});
有没有办法可以transition在vuejs条件v-if和v-else？之间使用？
举个例子:
<transition name="fade">
<p v-if="show">hello</p>
<p v-else>Goodbye</p>
</transition>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
我似乎无法transition在这样的场景中工作,在切换时show,<p>元素transition在它们之间使用.
我有一个输入字段,v-on:input它运行一个名为的方法activate,如下所示:
export default: {
data() {
return {
isHidden: true
}
},
methods: {
activate() {
this.isHidden = false;
}
}
}
isHidden 打开/关闭一些图标(这个数据属性是什么并不重要;我只是出于示例目的使用它).
所以目前,当用户执行此操作时,input它会立即打开该activate功能.有没有办法让它延迟通过setTimeout？我尝试过以下操作,但它不起作用:
methods: {
setTimeout(function() {
activate() {
this.isHidden = false;
}
}, 500)
}
我有一张purchases桌子：
-----------------
user_id | amount
-----------------
1 | 12
1 | 4
1 | 8
2 | 23
2 | 45
2 | 7
我想要一个查询，每个返回一行user_id，但我想要的每个行user_id是每个amount最小的行user_id。所以我应该得到我的结果集：
-----------------
user_id | amount
-----------------
1 | 4
2 | 7
DISTINCT在列上使用user_id可确保我不会得到重复的用户，但我不知道如何制作它，以便返回具有最少的 amount用户行。
我有一个HTML输入字段来输入一些信息:
<div id="fruitForm">
<div class="inputArea">
<label for="fruit0">Enter Fruit Name</label>
<input id="fruit0"></input>
</div>
</div>
<button @click="newInputField">Add More Fruit Input Fields</button>
<button @click="submit">Submit Fruit</button>
然后我处理点击事件:
export default {
data() {
return {
}
},
methods: {
newInputField() {
//Create another input area for users to input fruits
},
submit() {
//Do something here
}
}
}
当用户选择Add More Fruit Input Fields按钮时,它应该创建一个新的输入区域,以便HTML看起来像这样:
<div id="fruitForm">
<div class="inputArea">
<label for="fruit0">Enter Fruit Name</label>
<input id="fruit0"></input>
</div>
<div class="inputArea">
<label for="fruit1">Enter Fruit Name</label>
<input id="fruit1"></input> …我有一张桌子shipments：
--------------------------
id | event | quantity |
--------------------------
1 | received | 20 |
2 | sent | 30 |
3 | received | 45 |
我想要一个查询，它将所有数量相加received，并从sent数量中减去该值。查询应返回结果35。
SELECT SUM(quantity)
FROM shipments
WHERE event = 'received';
该查询返回65. 我怎样才能让它也减去数量sent（并得到结果35）？
使用Vue.js 2.0版
我有这段代码，它从一个数组生成一个列表。它将每个数组项插入输入字段中：
<div class="form-horizontal" id="portEditTab2">
<div v-for="list in nameList">
<div>
<label class="col-sm-1 control-label"
for="nameList">1</label>
<div class="col-sm-10">
<input v-bind:value=list.nameList
type="text"
id="nameList">
</div>
</div>
</div>
</div>
这是我的Vue实例：
var portEditTab = new Vue({
el: '#portEditTab2',
data: {
nameList: []
}
});
按照现在的代码，例如，如果“ list.nameList”的数组中有3个项目，它将把这3个项目中的每一个都放在自己的输入字段中。
我想要做的是在每个输入字段旁边放置一个标签，我只希望它是从1到其输入字段数量不限的数字。
目前，该<label>字段为1。就目前而言，每个输入字段都将带有一个1as的标签。我希望<label>数字增加1，例如，标签是1, 2, 3
var $insertSuccessMessage = $('#insertSuccessMessage');
var $successPopup = $('#successPopup');
var $successSpan = $('#successSpan');
我有一个div标签:
<div id="insertSuccessMessage"></div>
当用户成功将值输入到输入字段中时,我试图在此div标签下方显示"成功"弹出窗口,如下所示:
$insertSuccessMessage.append('<div class="alert alert-success alert-dismissible" id='successPopup' role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button><span id="successSpan"></span></div>');
$successSpan.text("Successfully inserted value!");
方:我正在使用Bootstrap.
所以successPopup会出现,但文字不会; 文本未插入span标记之间.
我正在尝试在按钮内添加图标。问题是，每当我添加图标时，它都会更改按钮的形状（根据图标的大小，它会变高，有时会变宽），并且按钮的文本未对齐，因此没有不再居中，而是将文本下推。
<button>
<i class="material-icons">weekend</i>
Test
</button>
和CSS：
i {
color: #669FAB;
font-size: 24px !important;
}
button {
min-width: 100px;
}
https://jsfiddle.net/uxs71ymz/1/
我希望图标向左移动，同时使文本保持在按钮内的中心位置。