0

пробую создать компонент

<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

2 ответа 2

1

1) data должен возвращать объект!

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

2) Для проверки что компонент подцепляется ты можешь написать метод mounted и проверить в нем например 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>
0

Не работает потому, что напутали много.

  1. data должен возвращать объект
  2. Если используете компоненты в таблице, то нужен параметр "is": Особенности парсинга DOM-шаблона
  3. Там же в tr перебор объекта и совсем другой props

Вот рабочий код:

<!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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.