<p>
    	<a class="main-user">@{commentChild.user.name}</a>&nbsp;&nbsp;回复
    	<a class="commented-user">@{ commentChild.to_user_id }</a>:
    	<p v-html="commentChild.html_body"></p>
</p>

就是像这样的通过**@{ commentChild.to_user_id }只能获取回复对象的id那么在blade模板中怎么得到回复对象的名字**呢

0 分享

JellyBool 回复 Gavin1024

8年前

后端查询的时候，你使用 with 进行 eager load 的话就可以把相对应的 toUser 拿到了吧

0 分享

Gavin1024 回复 JellyBool

8年前

我的comment表里有user_id 还有 to_user_id（也就是回复的人的id） (ps:因为我想实现的就是平时微博评论那样的一种形式) 那么通过eager load可以拿到user_id的信息包括姓名那么to_user_id对应的姓名好像就没办法拿到了哎

0 分享

JellyBool 回复 Gavin1024

8年前

怎么会呢？能拿到 user_id 对应的 user ，怎么可能拿不到 to_user_id 的 user 呢。。。。。大概是这样的：

Comment::with('toUser') // 这里的 toUser 就是你定义的 relationship

0 分享

Gavin1024 回复 JellyBool

8年前

懂了解决了我又添加了个to_user的 relationship 这样eager load了两个关系谢谢Jelly啦

0 分享

storm19890129

8年前

[Vue warn]: Component template requires a root element, rather than just text:

todo-form-template ?代码一模一样,出来这个

0 分享

storm19890129

8年前

[Vue warn]: Component template requires a root element, rather than just text:

todo-form-template

0 分享

storm19890129

8年前

Component template requires a root element, rather than just text:

0 分享

storm19890129

8年前

咦,点一下怎么出来这么多…

0 分享

vincent067

7年前

    <button class='btn btn-xs pull-right' 
                v-bind:class="[work.finished ? 'btn-success':'btn-danger']" 
                v-bind:class="{'important' : work.important}" 
                v-on:click.prevent="changeWork(work,index)" >
                  { work.finished ? '已经完成' : '未完成'}
                </button>

这个元素放在x-template 内时会报错，提示 duplicate attribute: v-bind:class ，尝试删除一个 v-bind 之后就正常了。
但是我不是使用component时，写两个 v-bind:class 并不会报错。这是啥情况。

0 分享

JellyBool 回复 vincent067

7年前

正常情况下不就是一个 v-bind:class 么？

0 分享

aaronlam 回复 vincent067

7年前

如果是这种情况，其实你的v-bind:class是不是可以写成如下形式？
:class="[work.finished ? ‘btn-success’:‘btn-danger’, work.important ? ‘important’:’’]"

0 分享

liujun 回复 vincent067

7年前

用数组和对象的混合写法，文档里有

0 分享

z375742134

7年前

这个也看不了

0 分享

1977798228

7年前

视屏2和3提示不能看无法播放该视频，请换一个支持HTML5视频功能的浏览器…其他的可以

0 分享

JellyBool 回复 1977798228

7年前

我这边更新好资源了，目前来说应该是 OK 的

0 分享

a359611223

7年前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2.0</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
    <style>
        .completed{
            color:aquamarine;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-static top">Vue js 2.0</nav>
        <div id="app" class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Welcome Vue js 2.0</div>
                        <div class="panel-body">
                            <h1>My todos {todoCount}</h1>
                            <todo-items :todos="todos"></todo-items>
                            <todo-form :todos="todos"></todo-form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
<script type="text/x-temlpate" id="todo-items-template">
    <ul class="list-group">
        <li class="list-group-item"
            v-bind:class="{'completed' : todo.completed}"
            v-for="(todo,index) in todos">
            {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="toggleCompletion(todo)"
            >{todo.completed? 'Done' : 'Do'}
            </button>


        </li>
    </ul>
</script>
<script type="text/x-template" id="todo-add-form-template">
    <form v-on:submit.prevent="addTodo(newTodo)">
        <div class="from-group">
            <input type="text"
                   v-model="newTodo.title"
                   class="form-control"
                   placeholder="Add a new todo">
        </div>
        <br>
        <div class="form-group">
            <button class="btn btn-success" type="submit">Add Todos</button>
        </div>
    </form>
</script>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script>
    Vue.component('todo-items',{
        template:'#todo-items-template',
        props:['todos'],
        methods:{
            deleteTodo(index){
                this.todos.splice(index,1)
            },
            toggleCompletion(todo){
                todo.completed = !todo.completed
            }
        }
    });
    Vue.component('todo-form',{
        template:'#todo-add-form-template',
        props:['todos'],
        data(){
            return {
                newTodo:{id:null,title:'',completed:false}
            }
        },
        methods:{
            addTodo(newTodo){
                this.todos.push(newTodo),
                    this.newTodo = {id:null,title:'',completed:false}
            },

        }

    });
    new Vue({
        el:'#app',
        data:{
            message:'Hello World',
            todos:[
                {id:1,title:'Learn Vuejs',completed:false}
            ],
        },
        computed:{
            todoCount:function(){
                return this.todos.length;
            }
        },

    })
</script>
</body>
</html>

0 分享

zhangbao1992

7年前

@JellyBool 请教一下。

todo-items 组件和 todo-form 组件操作的变量 todos 是同一个吗？如果这样的话

<todo-items :todos="todos"></todo-items>
<todo-form :todos="todos"></todo-form>

变量 todos 就是以引用的形式传递的了，对吗？

0 分享

JellyBool 回复 zhangbao1992

7年前

这两个 todos 你可以认为它们并不相关，只不过都是用 :todos 这个名字作为 pops 而已，实际还是看你传入的数据是什么

0 分享

zhangbao1992 回复 JellyBool

7年前

但是 todo-form 里的提交按钮和 todo-items 里的删除按钮不都应该操作同一个 todos 吗？

0 分享

JellyBool 回复 zhangbao1992

7年前

啊哈，我想说的是：:todos 这个其实是可以自定义的啊，跟 props 对应上就 OK。这里操作一致是因为我们传入了一致的数据吧。。。

0 分享

zhangbao1992 回复 JellyBool

7年前

嗯对的如果在同一个父组件里使用了两次 todo-items 组件，现在的代码就会引起实例行为一致。最好在注册组件的时候，都有自己的 todos。我是这样意思：

父组件

new Vue({
	el: '#app',
	data: {
		initialTodos: [
			// ...
		]
	}
});

todo-items 组件

Vue.component('todo-items', {
	template: '#todo-items-template',
	props: ['initialTodos'],
	data() {
		return {
			todos: this.initialTodos ? [].concat(this.initialTodos) : [],
			newTodo: { title: '', completed: false }
		}
	},
        ...

在 #app 中使用 todo-items 组件

<div id="app" class="container">
	<div class="row">
		<div class="col-md-6">
			<todo-items v-bind:initial-todos="initialTodos"></todo-items>
		</div>
		<div class="col-md-6">
			<todo-items v-bind:initial-todos="initialTodos"></todo-items>
		</div>
	</div>
</div>

我说每个组件实例都有自己的 todos，就是 todos 是这样创建的

todos: this.initialTodos ? [].concat(this.initialTodos) : [],

这样使用，对吗？我是这样做，才避免两个组件实例行为一致的。

0 分享

JellyBool 回复 zhangbao1992

7年前

恩，是这样的。因为 initialTodos 是 #app 的数据，而你在将数据传入组件 todo-items 的时候都是传的 initialTodos 这个数据啊。你是想组件的数据不一样？

<div class="col-md-6">
            <todo-items v-bind:initial-todos="initialTodos"></todo-items>
        </div>
        <div class="col-md-6">
            <todo-items v-bind:initial-todos="[{ title: 'another todo', completed: true }]"></todo-items>
        </div>