主页 / 问题 / 639970
Accepted
des1roer
Asked:2020-03-16 00:44:23 +0800 CST2020-03-16 00:44:23 +0800 CST

Vue js 循环使用组件

  • 772

试图创建一个组件

<head>
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>
  <div class="container" style="margin-top: 20px" id="app">
    <child message="hello!"></child>
    <table class='table table-bordered'>

      <tbody>
        <user :users="users"></user>
      </tbody>
    </table>

  </div>
</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">
<script type="text/javascript">
  Vue.component('user', {
    // declare the props
    props: ['users'],
    // just like data, the prop can be used inside templates
    // and is also made available in the vm as this.message
    template: `        
        <tr v-for="user in users">
          <td @click="selectResponder(user)"> {{user.name}} </td>
          <td> {{user.con_position}} </td>
          <td> {{user.telephone}} </td>
          <td> {{user.email_to}} </td>
          <td> {{user.mobile}} </td>
        </tr>`
  })

  new Vue({
    el: '#app',
    data: {
      users:
      [{ name: 1, con_position: 2, telephone: 33, email_to: 44, mobile: 555 },
      { name: 2342, con_position: 34534, telephone: 3453453, email_to: 345345, mobile: 34345345 },]
    },
    methods: {
      selectResponder(user) {
        //either...

        user.name = 4324
        console.log(user)
      }
    }
  })

</script>

但什么也没有出来。控制台没有错误

http://codepen.io/des1roer/pen/aJLpog

vue.js

2 个回答

  1. Best Answer

    1）数据必须返回一个对象！

    data: function(){return {users:[]}}

    2）查看组件是否挂上，可以写挂载方法进去查看，例如console.log(1)

    3）您仍然有一个未描述的组件<child message="hello!"></child>

    4）我不知道你的问题到底是什么，模板没有被拾取，但是你可以这样做

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">
  <title>Document</title>
</head>
<body>
  <div class="container" style="margin-top: 20px" id="app">       
        <users :users="users"></users>    
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  new Vue({
    el: '#app',
    data: function(){
      return {
        users:
          [
            { name: 1, con_position: 2, telephone: 33, email_to: 44, mobile: 555 },
            { name: 2342, con_position: 34534, telephone: 3453453, email_to: 345345, mobile: 34345345 }
          ]
        }  
    },
    components:{
      'users': {
        'props':['users'],
        render:function (createElement) {
                    if (this.users.length) {
                      return createElement('ul', this.users.map(function (item) {
                        return createElement('li', item.name)
                      }))
                    } else {
                      return createElement('p', 'No items found.')
                    }
                  }

      }
    }

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

  2. 它不起作用，因为他们搞砸了很多。

    1. 数据必须返回一个对象
    2. 如果你在表格中使用组件，那么你需要“is”参数：DOM模板解析特性
    3. 还有tr对象的迭代和完全不同的道具

    这是工作代码：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>vue</title>
</head>

<body>
  <div class="container" style="margin-top: 20px" id="app">
    <child message="hello!"></child>
    <table class='table table-bordered'>

      <tbody>
        <tr is="user" v-for="user in users" :user="user"></user>
      </tbody>
    </table>

  </div>
</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">
<script type="text/javascript">
  Vue.component('user', {
    // declare the props
    props: ['user'],
    // just like data, the prop can be used inside templates
    // and is also made available in the vm as this.message
    template: `        
        <tr>
          <td @click="selectResponder(user)"> {{user.name}} </td>
          <td> {{user.con_position}} </td>
          <td> {{user.telephone}} </td>
          <td> {{user.email_to}} </td>
          <td> {{user.mobile}} </td>
        </tr>`
  })

  new Vue({
    el: '#app',
    data: function(){
        return {
              users:
              [
                { name: 1, con_position: 2, telephone: 33, email_to: 44, mobile: 555 },
                 { name: 2342, con_position: 34534, telephone: 3453453, email_to: 345345, mobile: 34345345 },
              ]
        }
    },
    methods: {
      selectResponder(user) {
        //either...

        user.name = 4324
        console.log(user)
      }
    }
  })

</script>

</body>
</html>
    • 0

相关问题