我有一个Vue.js应用程序,我对一系列项目进行了v-repeat.我想将newItem添加到项目列表中.当我尝试this.items.push(this.newItem)推送的对象仍然绑定到输入.考虑以下内容:
new Vue({
el: '#demo',
data: {
items: [
{
start: '12:15',
end: '13:15',
name: 'Whatch Vue.js Laracast',
description: 'Watched the Laracast series on Vue.js',
tags: ['learning', 'Vue.js', 'Laracast', 'PHP'],
note: "Vue.js is really awesome. Thanks Evan You!!!"
},
{
start: '13:15',
end: '13:30',
name: "Rubik's Cube",
description: "Play with my Rubik's Cube",
tags: ['Logic', 'Puzzle', "Rubik's Cube"],
note: "Learned a new algorithm."
}
],
newItem: {start: '', end: '', name: '', description: '', tags: '', note: ''} …我当前使用rails 3.2.10的RoR应用程序,我想在rails 4.0.0上升级它.
我解决了gem依赖,但是当我运行rails服务器时,它会给出错误: -
undefined method `[]=' for nil:NilClass
config/application.rb:39:in `<class:Application>'
我的config/application.rb文件在第39行有此代码.
#JavaScript files you want as :defaults (application.js is always included).
config.action_view.javascript_expansions[:defaults] = %w(jquery rails)
应该做什么 - 改变代码或删除,任何依赖或任何其他选项.
Rails 4还支持资源预编译,所以我评论这一行: -
#config.assets.enabled = true In rails 4 assets pipline enable by default
我有json对象数组包含firstname,lastname和age.我想根据年龄对数组进行排序.
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>Original name: <span id="origname"></span></p>
<p>New name: <span id="newname"></span></p>
<p>Age: <span id="age"></span></p>
<script>
var employees = [
{ "firstName" : "John" , "lastName" : "Doe" , "age":"24" },
{ "firstName" : "Anna" , "lastName" : "Smith" , "age":"30" },
{ "firstName" : "Peter" , "lastName" : "Jones" , "age":"45" },
];
document.getElementById("origname").innerHTML=employees[0].firstName + " " + employees[0].lastName;
// Set new name
employees[0].firstName="Gilbert";
document.getElementById("newname").innerHTML=employees[0].firstName + " " + employees[0].lastName;
document.getElementById("age").innerHTML=employees[0].age;
</script>
</body> …我正在尝试将样式应用到<p>div中的最后一个.我想在不添加新类(或ID)的情况下这样做.
我已经尝试过使用last-child选择器,但它不起作用.
我甚至尝试声明p:last-child {font-style: italic;}我的所有CSS文档,这似乎没有任何影响.
这是我的HTML:
<div class="new-section">
<div class="collection-container">
<div class="container">
<div class="row">
<div class="title span16">
<h1>The Title</h1>
</div>
<div class="span8">
<p>Some text.</p>
<p>This collection includes video, audio and essays.</p>
<p>Visit now</p>
<div class="arrow-right"></div>
</div>
</div>
</div>
</div>
</div>
这是我的LESS CSS:
.collection-container {
height: 200px;
position: relative;
background-color: @gray;
.container {
padding-top: @r-margin;
.title {
margin-bottom: @xs-margin;
}
.span8 p:last-child {
font-style: italic;
}
}
}
我有app.js文件,其中gmarkers是一个对象数组:
var vm = new Vue({
el: '#lili',
data: {
listings: gmarkers
}
});
在我的HTML文件中:
<div id="lili" >
<div
v-repeat="gmarker : listings"
class="listing listing-list col-sm-12"
style="height:50px;line-height:50px;"
data-cat="@{{gmarker.mycategory}}"
data-id="@{{gmarker.id}}"
>
<span style="color:black;">
<a target="_blank" href="@{{gmarker.listlink}}">
@{{ gmarker.listname }}
</a>
</span>
<span class="tag blue-back" style="margin-left:5px;">
<a target="_blank" href="@{{gmarker.catlink}}">
@{{gmarker.listcat}}
</a>
</span>
<span style="margin-left:20px;color:#bbb;">
@{{gmarker.distance}}km
</span>
</div>
</div>
加载页面时,DOM正确加载,显示我正在寻找的列表,但是当(在js中的ajax调用之后)gmarkers对象发生更改时,DOM不会更改.
新的gmarkers完全是从头开始创建并包含新对象.
我错过了什么？