Компоненты VueJS не работают с загрузочным столом

При использовании компонентов VueJS с таблицей Bootstrap данные из компонентов не отображаются вообще. Однако при использовании span или простого div он просто показывает штраф. Не знаю, чего мне здесь не хватает.Компоненты VueJS не работают с загрузочным столом

new Vue({ 
 
     el: '#app', 
 
     data: { 
 
      plans: [ 
 
       {name: 'Enterprise', price: 100}, 
 
       {name: 'Pro', price: 50}, 
 
       {name: 'Beginner', price: 10}, 
 
       {name: 'Free', price: 0} 
 
      ] 
 
     }, 
 
     components: { 
 
      plan: { 
 
       template: '#plan-template', 
 
       props: ['plan'] 
 
      } 
 
     } 
 
    })

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>VueJS</title> 
 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
<div id="app"> 
 
    <div class="container"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       Plans 
 
      </div> 
 
      <table class="table"> 
 
       <tbody> 
 
       <tr v-for="plan in plans"> 
 
        <plan :plan="plan"></plan> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<template id="plan-template"> 
 
    <td>{{ plan.name }}</td> 
 
    <td>{{ plan.price }}</td> 
 
</template> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 

 
</body> 
 
</html>

источник

2016-08-14 Md Mazedul Islam Khan

Согласно этому сообщению http://forum.vuejs.org/topic/2102/v-for-with-template-not-working-when-using-tr-tag/2 по Linusborg

Проблема в том, что HTML действительно позволяет лишь очень определенное подмножество элементов внутри таблицы, поэтому, когда Vue использует браузер чтобы создавать элементы DOM из строки шаблона, браузер отфильтровывает ваш компонент.

Решение превратить себя в качестве заполнителя для компонента плана с атрибутом is= (http://vuejs.org/guide/components.html#is_attribute):

https://jsfiddle.net/Linusborg/bc2ast1j/1/

Пожалуйста, обратите внимание на замену: falseoption в коде Плана компонента JS.

Без него Vue заменит содержимое контентом шаблона, оставив вам элементы без родителя, что является недопустимым HTML.

источник

2016-08-15 02:39:09 GONG

Компоненты VueJS не работают с загрузочным столом

ответ

Смежные вопросы