vuejsコンポーネントのバインディング属性

Question

Laravel 5.3でvuejsの最新バージョンを使用しようとしています！私が達成しようとしているアイデアは、foreachユーザーのコンポーネントを作ることです。だから、私はすべてのユーザーがリストされているとforeach 1つのボタン "編集"が、このボタンをクリックすると私はこのユーザーを更新するフォームが表示されるはずです。 だから、これは私がコンポーネントを定義した方法です：

<script> 
new Vue({ 
    el: '.view-wrap', 
    components: { 
    user-view: { 
     template: '#user-view', 
     props: ['user'] 
    } 
    }, 
    data: { 
    users: <?php echo json_encode($users); ?>, 
    }, 
    methods: { 
    showForm: function(number){ 
     $('div.update-user-'+number).css({'display':'block'}); 
     }, 

    getClassName: function (index) { 
     return "update-user-"+index; 
    }, 

    getUpdateUrl: function(id){ 
     return '/users/update/'+id; 
    }, 
    }   
}); 

これは、クラス名を取り「ユーザービュー」用のテンプレートである「updateClass」すべてのユーザーのIDが含まれている（ショーのために/非表示の目的）、各フォームアクション、最終的にオブジェクトのユーザーとそれをバインドするために、ユーザーを更新するためのURLである「UPDATEURL」：

<template id="user-view"> 
    <div> 
    <div class="updateclass"> 
     <form class="form-horizontal" method="PUT" action="updateUrl"> 
     {{ csrf_field() }} 
     <ul> 
      <li> 
      <label for="name"> Name </label> 
      <input type="text" name="name" :value="user.name"> 
      </li> 
      <li> 
      {!! Form::submit('Save', ['class' => 'button-green smaller right']) !!}     
      </li> 
     </ul> 
    {!! Form::close() !!} 
</div> 

とこれは、私は、テンプレートを呼び出す方法をようやくです：

<user-view v-for="user in users" :updateclass="getClassName(user.id)" :user="user" :updateUrl="getUpdateUrl(user.id)"></user-view> 

、問題：バインドされたテンプレートの呼び出しで定義されるように、例えば[クラス=「updateclass」]のためgetClassNameメソッド（user.id）の結果とupdateclassの値を変更しないと思われます。テンプレートで[：class = "updateclass"]を試してみると、プロパティまたはメソッド "updateclass"がインスタンスに定義されていません...

他のすべてのバインド属性にも同じことが適用されます。

Answer 1

クラスを動的に割り当てる構文が間違っています。

<div :class="updateclass"></div>