when i type this($vm0.$children.forEach(tab => console.log(tab.name)); in console getting undefined
iam just learning vuejs and creating components.
my html file is here
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
<style type="text/css">body {padding-top:40px; }</style>
</head>
<body>
<div id="root" class="container">
<tabs>
<tab name="About Us" :selected="true">
<h1>Here is the content for About us tab.</h1>
</tab>
<tab name="About Our Culture">
<h1>Here is the content for cukture tab.</h1>
</tab>
<tab name="Contact tab">
<h1>Here is the content for contact us tab</h1>
</tab>
</tabs>
</div>
<script src="js/11.js"></script>
</body>
</html>
my js code is here
Vue.component('tabs', {
template: `
<div>
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
<div class="tabs-details">
<slot></slot>
</div>
</div>
`,
mounted() {
console.log(this.$children);
}
});
Vue.component('tab',{
template: `
<div><slot></slot></div>
`,
props: {
name: { required : true }
}
})
new Vue({
el: "#root"
})
solved this mistake
$vm0 is current element in Vue
When i click a element in Devtools it is defined as $vm0 like html devtools
you can find its properties and methods,
you can change prperties and its values like
$vm0.message = "Hello World"
Related
I followed this Vuejs video tutorial : https://laracasts.com/series/learn-vue-2-step-by-step/episodes/9?autoplay=true
My HTML seems like him (except his design) :
<div id="app">
<message title="My Component title" body="Lorem ipsum dry"></message>
</div>
Then my vuejs code :
<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script>
new Vue({
el: '#app',
delimiters: ['${', '}']
});
Vue.component('message', {
props: ['title', 'body'],
template: `
<article class="message">
<div class="message-header">
${title}
</div>
<div class="message-body">
${body}
</div>
</article>
`
});
</script>
I changed Vuejs variable delimiters because it's a twig template file.
Inspecting the source code in the browser, the HTML code is not replaced by the code defined in the template... I don't see why.
You are declaring your template using JavaScript template strings (`).
You need to escape ${ in template strings, because they have specific meaning for them. Escape like: \${
Also, you need to declare the delimiters on the component itself.
JSBin demo: http://jsbin.com/notocozepi/edit?html,js,output
Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<message title="My Component title" body="Lorem ipsum dry"></message>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>
Vue.component('message', {
props: ['title', 'body'],
delimiters: ['${', '}'],
template: `
<article class="message">
<div class="message-header">
\${title}
</div>
<div class="message-body">
\${body}
</div>
</article>
`
});
new Vue({
el: '#app',
delimiters: ['${', '}']
});
</script>
</body>
</html>
One last note: mind the order. The components must be defined before they are used.
I was following the 30 days of react pdf for day 4 and I can't seem to get the css to render at all. I can get the text and image to show.
I tried to basically copy the the helloworld concept but I put everything in one html for now. I also tried day 4 example from github and the index.html doesn't render anything either. In so, if anyone know why, can you please help me out. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/070d6cd5b4d4ec1a3e6892d43e877039a91a9108/timeline.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<title>Time Line App</title>
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component { render() { return (
<div className="notificationsFrame">
<div className="panel">
<Header />
<Content />
</div>
</div>
) } } class Header extends React.Component { render() { return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input type="text" className="searchInput" placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
) } } class Content extends React.Component { render() { return (
<div className="content">
<div className="line"></div>
{/* Timeline item */}
<div className="item">
<div className="avatar">
<img alt='Doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> Doug
</div>
<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>
{/* ... */}
</div>
) } } var mount = document.querySelector('#app'); ReactDOM.render(
<App />, mount);
</script>
</body>
</html>
Problem solved. So it just needed to add the class = "demo" to the div id = "app"></div>.
So it should like this this: <div id="app" class="demo"></div>. Also I had to download the css locally. Haven't got it work from the link given in the css. There was some minor css difference from the pdf image.
command promt errorIn home.html, the value of {{message}} is not displayed .Infact it displays {{message}}
node.js is used to run the application.I guess there is a problem in connecting to the controller or the server.Please help to find the solution.
var app=angular.module('Demo',["ngRoute"])
.config(function ($routeProvider,$locationProvider)
{
$routeProvider
.when("/home",{
templateUrl:"home.html",
controller:"homeController"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
})
$locationProvider.html5Mode(true);
})
.controller("homeController",function($scope)
{
$scope.message="hey home page";
})
<!DOCTYPE>
<html >
<head>
<title>angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="router.js"></script>
<base href="./" />
</head>
<body ng-app="Demo">
<div>
<h1>website header</h1>
</div>
<div>
<ul>
<li>home</li>
</ul>
</div>
<div class="mainContent">
<ng-view></ng-view>
</div>
<h1>footer</h1>
</body>
</html>
<h1>{{message}}</h1>
<div>
message from controller will be displayed here
</div>
Try to use this <li>home</li> Maybe you missed the #in the a tag
I'm having problems with loading a page that has been packed with Webpack. Im using React to render the page HTML. When I open my html in my web browser, it gives me the following error:
Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element.
in div (created by Component)
in div (created by Component)
in Component"
My html is:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="cssWEB.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body data-ng-app="App">
<div id="root"></div>
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
My JS is:
import React from 'react';
import ReactDOM from 'react-dom';
import {Element, scroller} from 'react-scroll';
const Component = React.createClass({
componentDidMount: function() {
scroller.scrollTo('myScroller', {
duration: 1500,
delay: 500,
smooth: true
});
},
render: function() {
return (
<div>
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link type="text/javascript" href="jscode.js"></link>
<header>
La Barriada
</header>
<div className="cube" change-background colorcode="#f45642" ref={(el) => { this.messagesEnd = el; }}>
<div className="front"><span>Experience</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
<div className="wrap2">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Work</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<div className="wrap3">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Contact</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<Element name="link1">
<div className="bg2" id="linkhere"></div>
</Element>
<div className="slide1">
</div>
<div className="slidechild1">
<div className="centerbox">
<div className="center">
<ul>
<li data-ng-click="clicked2()" id="B1">aa</li>
<li id="B2">cc.i</li>
</ul>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<Component />,
document.getElementById("root")
);
What is causing this error and how can I fix it?
You might want to double check if those attributes are sorted by React. You can do so by reading the docs page here.
It doesn't look like those DOM attributes change-background or colorcode are
supported.
EDIT: The same docs state that:
In React, all DOM properties and attributes (including event handlers)
should be camelCased. For example, the HTML
attribute tabindex corresponds to the attribute tabIndex in React.
So it might be worth trying changeBackground and colorCode respectively in your JSX and see if that does the trick.
ReactJS currently don't supports custom attributes as specified here. It strips of unknown attributes. You can solve the problem by manually adding the attribute in the componentDidMount method as specified in this SO answer.
You can't use any custom attributes as a prop. Rather you should use valid html attributes. React supports almost every valid html attributes. Here is the list of valid html attributes supported by React.
I am totally new to vue.js. I am trying to repeat a simple list but its not showing anything. My code is
<html>
<head>
<title>VUE Series</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="tasks">
<div>
<h2>Tasks</h2>
<ul class="list-group">
<li v-repeat="tasks"> {{ $value }} </li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="app.js"></script>
</body>
</html>
and app.js file is :
new Vue({
el : '#tasks',
data : {
tasks : ['Assam', 'Manipur', 'Meghalaya']
}
})
Fiddle link is FIDDLE
You should use v-for instead of v-repeat and the syntax should be v-for="task in tasks"and you use taskto reference the current task.