Skip to content

Instantly share code, notes, and snippets.

@ritcheyer

ritcheyer/app.js

Created April 15, 2019 02:31
Show Gist options
  • Save ritcheyer/d682909701f6a0131fe2b776960d40c9 to your computer and use it in GitHub Desktop.
Save ritcheyer/d682909701f6a0131fe2b776960d40c9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
Vue.component('list-item', {
props: ['text', 'link'],
template: '<li><a :href="link">{{ text }}</a></li>'
})
new Vue({
el: '#sidemenu',
data: {
links: [
{ id: 0, text: 'Index', link: '/' },
{ id: 1, text: 'Tutorials', link: '/tutorials' },
{ id: 2, text: 'Components', link: '/components' },
{ id: 2, text: 'Vue ChartJS', link: '/charts' }
]
}
})
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learning VueJS</title>
<link rel="stylesheet" href="/assets/css/app.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css">
<link rel="icon" href="assets/img/vuejs.png">
</head>
<body>
<div class="page-wrap">
<h1>Pages</h1>
<main class="main-wrap">
<ol id="sidemenu">
<list-item
v-for="(link, index) in links"
:key="index"
v-bind:text="link.text"
v-bind:href="link.url"
></list-item>
</ol>
</main>
</div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/assets/js/app.js"></script>
</body>
</html>
@ritcheyer
Copy link
Author

why is the output of <list-item> not rendering the href attribute? Here's my rendered <list-item>:

<ol id="sidemenu">
  <li>
    <a>Index</a>
  </li>
  <li>
    <a>Tutorials</a>
  </li>
  <li>
    <a>Components</a>
  </li>
  <li>
    <a>Vue ChartJS</a>
  </li>
</ol>
``

@ritcheyer
Copy link
Author

Figured it out. switched from link to url in the dataset (and references in the template). I think it was getting hung up on the fact that i was using link in the dataset as well as link as the item in the for loop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment