Question

我正在尝试使用最新版本的vuejs与Laravel 5.3！我想要实现的想法是使用户成为一个组件。因此，我列出了所有用户并预先设置了一个按钮＆＃34;编辑＆＃34; ，当我单击此按钮时，我应该看到更新此用户的表单。所以这就是我定义组件的方式：

<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;
    },
  }         
});

这是＆＃34;用户视图＆＃34;的模板。它取一个类名＆＃34; updateClass＆＃34;其中包含每个用户的ID（用于显示/隐藏目的），＆＃34; updateUrl＆＃34;这是更新用户以将其与每个表单操作绑定的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>

然后问题：例如，[class =＆＃34; updateclass＆＃34;]似乎没有使用模板调用中定义的getClassName（user.id）的结果更改updateclass的值绑定到。当我在模板中使用[：class =＆＃34; updateclass＆＃34;]进行尝试时，我得到：属性或方法＆＃34; updateclass＆＃34;没有在实例上定义...

同样适用于所有其他绑定属性。

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>

vuejs组件

1 个答案: