[Vuejs]-How to use <th> as slot in vue.js

by

1👍

Try this! You just need to wrap <th> with <template> tag.

<html>
<head>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
	 <lbtable>
		<template>
	            <th>Column 1</th>
		    <th>Column 2</th>
		</template>
	</lbtable>
  </div>
</body>
</html>
<script>
	Vue.component('lbtable', {
	'template': `
	   <div>
		<table border="1">
			<thead>
			   <tr>
			     <slot></slot>
			   </tr>
			</thead>
			<tbody>
			<tr>
			   <td>1</td>
		       <td>2</td>
			</tr>
			</tbody>
		</table>
	   </div>`});

	new Vue({
		el: "#app"
	});
</script>
👤Hardik Raval

Leave a comment