Vue компонент - таблица тегов работает плохо, находится под строками - PullRequest
Новая
       44

Vue компонент - таблица тегов работает плохо, находится под строками

0 голосов
/ 06 марта 2020

im learnign VUE JS и я не понимаю этого поведения (странно для меня).

Я хочу получить список людей в таблице с помощью компонента Vue. Таблица тегов Html находится под списком.

Документация гласит: у каждого компомента должен быть один root, хорошо, я могу обернуть каждую строку tbody, но это не решает эту проблему.

Как ее решить? 

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
        <div id="app">

            <table>
				<row
						v-for="people in peoples"
						v-bind:people="people"
						v-bind:key="people.id">
				</row>
			</table>
			
        </div>
        
        <script>

			Vue.component('c-tr', {

				template: '<tr></tr>'
			});

			Vue.component('row', {
				props: ['people'],
				template: '<tr><td>{{ people.name }}</td></tr>'
			});

			var app = new Vue({
				el: '#app',
				data: {
				peoples: [
					{ id: 20, name: 'Roman' },
					{ id: 30, name: 'Vasek' },
					{ id: 40, name: 'Ondra' }
				]
				}
			})

	
		</script>
    </body>
</html>
...