Skip to content

Instantly share code, notes, and snippets.

@ritcheyer

ritcheyer/app.js

Created April 15, 2019 02:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ritcheyer/d682909701f6a0131fe2b776960d40c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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

ritcheyer commented Apr 15, 2019

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

ritcheyer commented Apr 15, 2019

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