我把所有都改成message也一样报这个错，template里面的message接收不到我tag中传入的message
这个messages写错了？没有啊，data里的和传入的:message="messages"一致的。
老是报错vue.min.js:6 Uncaught ReferenceError: message is not defined(…)感觉今天莫名奇妙的.....帮我瞅瞅哪里的问题啊，组件里面的message居然说没有定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-8 col-md-offset-2 text-center" id="app">
<item-component :message="messages"></item-component>
</div>
</body>
<script src="//cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
<script type="text/x-template" id="template">
<ul>
<li v-for="msg in message"> msg.title </li>
</ul>
</script>
<script>
Vue.component('item-component', {
template: '#template',
prpos: ['message'],
})
new Vue({
el: '#app',
data: {
messages: [
{title: '组件化开发测试!', id: 1},
{title: 'Hello!', id: 2},
]
},
})
</script>
</html>嗯嗯，可以了！感谢。。。。。。自己想的不对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue2.0</title>
<link href="//cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
.completed {
color: #1b6d85;
text-decoration: line-through;
}
</style>
</head>
<body >
<nav class="nav navbar-default navbar-static-top">
<div class="container">
<div class="row" id="app">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome Vue2.0</div>
<div class="panel-body">
<h1>My todos { todocount }</h1>
<todo-item :todos="todos"></todo-item>
<todo-form :todos="todos"></todo-form>
</div>
</div>
</div>
</div>
</div>
</nav>
</body>
<script src="//cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script type="text/x-template" id="todo-template">
<ul class="list-group">
<li v-bind:class="{'completed':todo.completed}" v-for="(todo,index) in todos"
class="list-group-item">{ todo.title}
<button class="btn btn-warning btn-xs pull-right"
v-on:click="deletetodo(index)">Delete
</button>
<button class="btn btn-xs pull-right"
v-bind:class="[todo.completed?'btn-danger':'btn-success']"
v-on:click="completetodo(todo)">{ todo.completed?'undo':'completed' }
</button>
</li>
</ul>
</script>
<script type="text/x-template" id="todo-form-template">
<form v-on:submit.prevent="addtodo(newTodo)">
<div class="form-group">
<input v-model="newTodo.title" type="text" class="form-control" placeholder="add a new todo">
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Add Todo</button>
</div>
</form>
</script>
<script>
Vue.component('todo-item', {
template: '#todo-template',
props: ['todos'],
methods: {
deletetodo: function (index) {
this.todos.splice(index, 1);
},
completetodo: function (todo) {
todo.completed = !todo.completed;
}
}
})
Vue.component('todo-form', {
template: '#todo-form-template',
props: ['todos'],
data(){
return {
newTodo: {
id: null,
title: '',
completed: false
},
}
},
methods: {
addtodo: function (newtodo) {
newtodo.completed=false,
this.todos.push(newtodo);
this.newTodo = {id: null, title: ''};
},
}
})
new Vue({
el: "#app",
data: {
todos: [{
id: 1,
title: 'Vue2.0',
completed: false
}],
newTodo: {
id: null,
title: '',
completed: false
},
},
computed: {
todocount: function () {
return this.todos.length;
}
},
});
</script>
</html>
添加一个还可以，但是多添加之后completed就没用了，代码什么的都检查过了，没问题啊。
厉害！不过我还是有点问题，add多个几行点击completed按钮就不会出现你的这种效果了，还得看看哪里有错啊！好奇怪啊！
老是出现这个问题！当我重新申请id和secret之后，填入env中，好了，可以第三方登录。但是过几天，再用第三方登录便会出现500错误，但是地址栏上面携带的是有code和state。请问我这是什么问题，难道申请的id和secret会失效吗？（ps:按照您的视频来做的，之后我以为这个安正超的包有问题，就换成原始的socliate的包.可是一样会出现这个问题.）
你有试过多添加几行吗？添加第一次是可以的，但是多添加几行点击新添加的completed按钮，并不会出现这个效果。这很奇怪啊
哇!这个组件化开发解决了我上次评论回复的时候出现双向绑定的问题，打开多个回复框输入内容多个回复框出现相同的内容！这下解决了！哈哈。。。。就是一个页面太多内容了，正如你所说的，应该打包。。。
我把template放入vue文件，那么在html中怎么引用？