I have a vuejs code as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Vue2 Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2" ></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
</script>
</body>
The output is expected to show the list of todos
But the program shows simply as below
1.{{ todo.text }}
How can I get the correct output. What is the error here?
This one should work fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Vue2 Test</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2"></script>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
</body>
Open with npx serve . or just an index.html file in your browser.
Your data block isn't correct
<template>
<ol>
<li v-for="todo in todos" :key="todo">
{{ todo.text }}
</li>
</ol>
</template>
<script>
export default {
data() {
return {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Build something awesome" },
],
};
},
};
</script>
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 want to close collapse when resize the window.
var app = new Vue({
el: '#app',
created() {
window.addEventListener('resize', this.hideCollapse)
},
destroyed() {
window.removeEventListener('resize', this.hideCollapse)
},
methods: {
hideCollapse() {
console.log('hide collapse')
// what should I call to make the collapse hide
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
<b-collapse id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
<b-collapse id="collapse-1-inner" class="mt-2">
<b-card>Hello!</b-card>
</b-collapse>
</b-card>
</b-collapse>
</div>
Add a data property called open and bind it to v-model directive of b-collapse component then update inside the resize event callback :
var app = new Vue({
el: '#app',
data() {
return {
open: false
}
},
created() {
window.addEventListener('resize', this.hideCollapse)
},
destroyed() {
window.removeEventListener('resize', this.hideCollapse)
},
methods: {
hideCollapse() {
console.log('hise collapse')
this.open=true
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<!-- App -->
<div id="app">
<b-button v-b-toggle.collapse-1 variant="primary">Toggle Collapse</b-button>
<b-collapse v-model="open" id="collapse-1" class="mt-2">
<b-card>
<p class="card-text">Collapse contents Here</p>
<b-button v-b-toggle.collapse-1-inner size="sm">Toggle Inner Collapse</b-button>
<b-collapse id="collapse-1-inner" class="mt-2">
<b-card>Hello!</b-card>
</b-collapse>
</b-card>
</b-collapse>
</div>
I am developing shopping cart project in visual studio 2017. I am using vue js for front end development and mysql for backend . I added the axios script in my html code . When i run the application I following errors in google chrome console windows ..
Uncaught (in promise) ReferenceError: axios is not defined
at Promise.then.products (index.html:75)
at new Promise (<anonymous>)
at Vue.getAllProducts (index.html:74)
at index.html:130
index.html:110 Uncaught (in promise) ReferenceError: axios is not defined
at Promise.then.vendors (index.html:110)
at new Promise (<anonymous>)
at Vue.findAllVendors (index.html:109)
at index.html:131
Here is my html code .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.map"></script>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html">Show All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/AddProducts.html">Add Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html"> cart</a>
</li>
</ul>
</nav>
<br />
<div class="container" id="app">
<select class="form-control" id="sel1" v-on:change="applyfilters($event.target.value)">
<option value="">Select Any value</option>
<option v-for="v in vendors" :value="v.id">{{ v.name }} </option>
<!-- <option value="v.id">{{v.name}}</option>-->
<!--<option value="2">MI</option>-->
</select>
<br />
<div class="row col-12" id="product-list">
<div class="col-4 card mx-2 p-2" v-for="product in products" style="margin-bottom: 20px">
<b>Product Name :</b>{{product.name}}
<div class="row">
<div class="col-4 m-3 p-3">
<b>Price :</b> {{product.price}}
</div>
<div class="col-4 m-3 p-3">
<b>Vendor :</b> {{product.vendor.name}}
</div>
<div class="col-6 m-2 p-3">
<button class="col btn btn-primary" v-on:click="addToCart(product.id)">Buy</button>
</div>
</div>
</div>
<br />
</div>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
newTask: '',
id: 0,
url: '/todos',
status: false,
products: [],
vendors: []
},
methods: {
getAllProducts() {
new Promise((resolve) => {
axios.get('/api/products').then(function (response) {
resolve(response.data)
})
}).then((data) => {
this.products = data
// console.log(this.products)
})
},
addToCart(id) {
// console.log(id)
var obj = { productId: id };
// console.log(obj)
new Promise((resolve) => {
axios.post('/api/cart/', obj).then(function (response) {
resolve(response.data)
})
}).then((data) => {
// console.log(data)
console.log(data)
console.log(data.id)
if (!data.id) {
// console.log("fist login")
window.alert("Fist login ")
window.location = "signin.html";
}
else {
// console.log("successfully add to cart")
window.alert("product has been added to your cart")
}
})
},
findAllVendors() {
new Promise((resolve) => {
axios.get('/api/vendor').then(function (data) {
resolve(data.data)
// console.log(data.data)
})
}).then((data) => {
this.vendors = data
})
},
applyfilters(id) {
new Promise((resolve) => {
axios.get('/api/products/' + id).then(function (response) {
resolve(response.data)
})
}).then((data) => {
this.products = data
// console.log(this.products)
})
}
}
})
app.getAllProducts();
app.findAllVendors();</script>
</body>
</html>
Here is screen shot when i run the applications .
Did you try importing it? Maybe add this to your imports in head tag.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
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>
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!