首页 文章

vuejs组件中的绑定属性

提问于
浏览 次
0

我正在尝试使用最新版本的vuejs与Laravel 5.3！我想要实现的想法是使用户成为一个组件 . 所以我列出了所有用户，并且有一个按钮“编辑”，当我点击这个按钮时，我应该看到更新该用户的表单 . 这就是我定义组件的方式：

<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（用于显示/隐藏目的），一个“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>

接下来的问题是：例如，[class =“updateclass”]似乎不会更改updateclass的值，其结果是绑定到的模板调用中定义的getClassName（user.id） . 当我在模板中使用[：class =“updateclass”]进行尝试时，我得到：属性或方法“updateclass”未在实例上定义...

并且同样的事情适用于所有其他绑定属性 .

laravel-5.3 vuejs2

1 回答

  • 0

    用于动态分配类的语法是错误的 . 从 getClassName 方法你必须返回一个具有className的对象，如下所示： {"className: true} ，如下

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

    你可以像_2409295中那样分配它，如下所示：

    <div :class="updateclass"></div>
    回复于

相关问题