атрибуты связывания в компоненте vuejs

Question

Я пытаюсь использовать последнюю версию vuejs с Laravel 5.3! Идея, которую я пытаюсь выполнить, - сделать компонент для пользователя. Так что у меня есть все пользователи, перечисленные и отправленные, есть кнопка «edit», когда я нажимаю эту кнопку, я должен увидеть форму для обновления этого пользователя. Так вот как я определил компонент:

<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», который содержит идентификатор каждого пользователя (для показа/скрыть цели), «updateUrl», который является URL, чтобы обновить пользователя, чтобы связать его с каждой формой действия и, наконец, пользователь объекта:

<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»] не изменяет значение updateclass с результатом GetClassName (user.id), как определено в шаблоне вызова, связанного приложения к , Когда я попробую его с [: class = "updateclass"] в шаблоне, я получаю: свойство или метод «updateclass» не определен в экземпляре ...

и то же самое относится ко всем другим связанным атрибутам.

Answer 1

Синтаксис, используемый для динамического назначения класса, неверен. от метода getClassName вы должны вернуть объект, имеющий Classname как этот: {"className: true}, как следующий

getClassName: function (index) { 
     var tmp = {} 
     var className = 'update-user-'+index 
     tmp[className] = true 
     return tmp 
    } 

Чем вы можете назначить его как следующий, как в documentation:

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