I'm new on vue.js but I can not understand why it still says {{ title }} instead Hello world!
new Vue({
el:'#app',
data: {
title:"Hello World!"
}
});
<html>
<head>
<title></title>
</head>
<body>
<div id="#app">
{{ title }}
</div>
<script src="/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</body>
</html>
I can not understand what is wrong but I'm just copying and pasting from tutorial
You have to remove the # in <div id="#app">
Here is the full code :
new Vue({
el:'#app',
data:
{
title:"Hello World!"
}
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
</head>
<body>
<div id="app">
<p> {{ title }} </p>
</div>
<script src="script.js"></script>
</body>
</html>
<html>
# means id, you don't need to put id="#app", that's repetitive.
Besides that, you should load vue before you use new Vue.
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
{{ title }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data() {
return {
title: "Hello World"
}
}
});
</script>
</body>
</html>
Related
Property "dynamicslotname" was accessed during render but is not defined on instance. at in vue3.
I am testing the dynamic slot of vue3, but i missing the question "Property "dynamicslotname" was accessed during render but is not defined on instance. at "
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/lodash#4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<base-layout>
<template v-slot:[dynamicSlotName]>
<p>Hello</p>
</template>
</base-layout>
</div>
</body>
<script>
const baseLayout = {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
</div>
`
};
const helloVue = {
components: {
baseLayout
},
data() {
return {
dynamicSlotName: "header"
}
}
}
Vue.createApp(helloVue).mount('#app')
</script>
</html>
The slot name should be written in lowercase not in camelCase like dynamicslotname instead of dynamicSlotName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/lodash#4.17.20/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios#0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<base-layout>
<template v-slot:[dynamicslotname]>
<p>Hello</p>
</template>
</base-layout>
</div>
</body>
<script>
const baseLayout = {
template: `
<div>
<header>
<slot name="header"></slot>
</header>
</div>
`
};
const helloVue = {
components: {
baseLayout
},
data() {
return {
dynamicslotname: "header"
}
}
}
Vue.createApp(helloVue).mount('#app')
</script>
</html>
For more details please check https://v3.vuejs.org/guide/template-syntax.html#caveats
I use Windows, here I included script for vue, I didn't install vue, just use script.
The title of page is visible, yet "Hello vue" is not shown.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Vue-basis</title>
</head>
<body>
<script>
<div id="app">
<h1>Hello Vue</h1>
</div>
</script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
I'm trying to make a simple form validation page work with vee-validate. Something appears to be broken though, and I am unsure what exactly I am doing wrong.
The span tag appears as raw html:
Markup:
<!DOCTYPE html>
<html>
<head>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type='text/JavaScript' src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
</head>
<body>
<script type='text/JavaScript'>
Vue.use(VeeValidate); // good to go.
new Vue({
el: '#app',
data: {
email_primary: null
}
});
</script>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
</body>
</html>
Fiddle.
What do I need to do to make vee-validate work as expected?
The issue(s)
It appears to have been a few things, but the main culprit was that the type attribute on all the script tags were set to text/JavaScript which is invalid. Its best to either not set the type, or if you do, set it to text/javascript.
Also, since you're utilizing div#app as a template rather than just the root element, I added in the proper attributes.
Finally, always load your javascript after your html.
Fixed Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<form action='#' method='POST'>
<input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary">
<span v-show="errors.has('email_primary')" class="help is-danger">{{ errors.first('email_primary') }}</span>
<button class="button is-link" name='submitform' value='go'>Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script>
Vue.use(VeeValidate); // good to go.
new Vue({
el: "#app",
template: '#app',
data() {
return {
email_primary: null
};
}
});
</script>
</body>
</html>
Also, a working jsfiddle.
I hope this helps!
i've already seen some user with the same problem:
Lightgallery not working
but i still can't get it to work, here's my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</li>
<li <a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a>
</ul>
</div>
</div>
</body>
</html>
Can't figure out what i'm missing.
Thanks for any help
You haven't connect main file - lightgallery.js.
Connect it.
Can you please check this code and see if it does any help? Hope it does :)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css"></style>
<link rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery({
selector: '.item'});
});
</script>
</head>
<body>
<div class="row">
<ul class="lightgallery" id="lightgallery">
<li a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
<li ><a class="item" href="images/accessori1.jpg"><img src="images/accessori1.jpg"></a></li>
</ul>
</div>
</body>
</html>
I have just started a new project in MVC4 using some code from an existing MVC3 project. I can force my form to ajax reload the specific DIV, but not using the normal submit method, only with the test doSomthing() javascript function. What am I missing?
To clarify: The first button does not work right, the second one does - but I don't want to do it that way.
VIEW
#using (Ajax.BeginForm("Method1", null,
new AjaxOptions { HttpMethod = "post", UpdateTargetId = "divPartial1" },
new { id = "form1" }))
{
<div class="data">
#Html.LabelFor(x => x.TotalSubmitted, new { #class = "total" })<div class="number total">#Html.FormatValue(Model.TotalSubmitted, "{0:n0}")</div>
...
</div>
<div class="details">
<div id="divPartial1">
#Html.Partial("ReportDashboardAppPartial")
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="k-button"><span class="k-icon k-i-search" /></button>
<button type="button" name="Save" value="Save" onclick="doSomething(); return false;"><span class="k-icon k-i-search" /></button>
</div>
}
<script type="text/javascript">
function doSomething() {
$.ajax({
url: '#Url.Action("Method1", "Controller")',
type: 'post',
data: $('form#form1').serialize(),
success: function (result) {
$('#divPartial1').html(result);
}
});
}
</script>
_Layout
#model BaseViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="#Url.Content("~/Content/kendo.compatibility.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")" rel="stylesheet" type="text/css" />
#RenderSection("styles", false)
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js")"></script>
#RenderSection("scripts", false)
</head>
<body>
#Html.Partial("_AlertWindow")
<div id="wrapper">
<header>
<div id="logindisplay">
#Html.Partial("_LoginPartial")
</div>
<a href="#Url.Action("Index", "Home")">
<div id="logo"></div>
</a>
<div id="title">
<h1>Ha!</h1>
</div>
#(Html.Kendo().Menu().Name("Menu").BindTo("Main").SecurityTrimming(true))
</header>
<div id="main">
#RenderBody()
</div>
<footer>
<div id="version">#Html.ActionLink("Version " + #Model.CurrentVersion, "About", "Home")</div>
</footer>
</div>
#RenderSection("end_scripts", false)
</body>
</html>
I know this should work.
I had the same problem. The solution is to add a statement in _Layout.cshtml page.
#Scripts.Render("~/bundles/jqueryval")
The definition of ScriptBundle("~/bundles/jqueryval") as below
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));