I need to show the status of an object if it has a property or not. I add a property id to object and console.log shows it is true, But it is not updated in DOM element.
How can I see the status in DOM element?
var app = new Vue({
el: '#app',
data() {
return {
children: {}
}
},
methods: {
fillChildren() {
this.children['id'] = 'child1Id'
console.log(this.children.hasOwnProperty('id')) // This is 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>
<div id="app">
<div #click="fillChildren">Fill children</div>
{{children.hasOwnProperty('id')}} <!-- I want to see true after click -->
</div>
From Reactivity in Depth:
Vue cannot detect property addition or deletion.
You can circumvent this limitation by using the vm.$set instance method:
var app = new Vue({
el: '#app',
data() {
return {
children: {}
}
},
methods: {
fillChildren() {
this.$set(this.children, 'id', 'child1Id')
console.log(this.children.hasOwnProperty('id')) // This is 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>
<div id="app">
<div #click="fillChildren">Fill children</div>
{{children.hasOwnProperty('id')}} <!-- I want to see true after click -->
</div>
Related
It is my first "try" with Vue + vue-select.
I have imported Vue and vue-select like it is explained in the vue-select documentation.
And my first try is this simple HTML page :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- include VueJS first -->
<script src="https://unpkg.com/vue#latest"></script>
<!-- use the latest vue-select release -->
<script src="https://unpkg.com/vue-select#latest"></script>
<link
rel="stylesheet"
href="https://unpkg.com/vue-select#latest/dist/vue-select.css"
/>
</head>
<body>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options"></v-select>
</div>
<script>
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
options: ["foo", "bar", "baz"],
},
});
</script>
</body>
</html>
When I try this page, I have these errors in the console :
What it is wrong in this first try? When I understand this first example, it will be easier for the rest.
I just checked your code and seems this issue is due to the vue version you are using. I just used version 2.* and it is working.
Demo :
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: "#app",
data: {
selected: 'foo',
options: ["foo", "bar", "baz"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
<h1>Vue Select</h1>
<v-select :options="options" v-model="selected"></v-select>
</div>
Update : Here is the Vue 3 version of v-select
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
template: '#app-template',
data: () => ({
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
}),
}).use(vuetify).mount('#app')
<script src="https://unpkg.com/vue#next/dist/vue.global.js"></script>
<script src="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#vuetify/nightly#3.0.0-next-20220604.0/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/#mdi/font#6.x/css/materialdesignicons.min.css"/>
<script type="text/x-template" id="app-template">
<v-app>
<v-container fluid>
<v-select
:items="items"
></v-select>
</v-container>
</v-app>
</script>
<div id="app"></div>
I have a checkBox on vuejs. I call a function when it's status changes, but click event triggers before the v-model changes. So the value of v-model in the function is the previous value. How Can I make the click event trigger after the v-model's change?
var app = new Vue({
el: '#app',
data() {
return {
status: false
}
},
methods: {
checkBoxClicked() {
console.log(this.status)
}
}
})
<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-form-checkbox
v-model="status"
name="checkbox"
#click.native="checkBoxClicked"
>
I accept the terms and use
</b-form-checkbox>
</div>
Use change event instead of click:
<div id="app">
<b-form-checkbox
v-model="status"
name="checkbox"
#change="checkBoxClicked"
>
I accept the terms and use
</b-form-checkbox>
</div>
#atousadarabi
How about if you wait until the next render cycle, does that help?
methods: {
checkBoxClicked() {
this.$nextTick(() => {
console.log(this.status)
})
}
}
Otherwise just remove the click handler all together and have a watcher on status. Whenever it updates do what you need to :)
I'm using markdown vue which is a plugin for vue. It says it's supposed to have superscript and subscript functionality built in, however when I run the code for a subscript I get something that looks like this
y = x b + e
i i i
In order to have this functionality I'm trying to use this plugin but I'm having a hardtime figuring out how it's supposed to be registered globally with the MarkdownItVue plugin. I tried doing this...
import MarkdownItVue from 'markdown-it-vue'
import MarkdownItSub from 'markdown-it-sub'
MarkdownItVue.use(MarkdownItSub)
Vue.use(MarkdownItVue)
But this is working out...
I'm happy to change approaches too if there's a simpler fix for MarkdownItVue
Update
index.html
<!DOCTYPE html>
<head>
<title>Hello World</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<div id="app">
<div>
{{ msg }}
</div>
<markdown-it-vue :content="msg" class="md-body"></markdown-it-vue>
</div>
<script src="app.js"></script>
</body>
app.js
new Vue ({
el: '#app',
data() {
return {
msg: "$y_i = x_i + \\epsilon_i$"
}
}
})
It seems to be working just fine by default. See the example.
Anyway it seems from the docs that if you need to install additional markdown-it plugins, it needs to be done on component instance
const vm = new Vue({
el: "#app",
data() {
return {
content: "H~2~0 - 29^th^"
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
<div id="app">
<markdown-it-vue :content="content">
</markdown-it-vue>
</div>
The LaTeX rendering requires the stylesheet from markdown-it-vue. Make sure you're including it as a <link>:
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
new Vue({
el: "#app",
data() {
return {
content: "$y_i = x_i + \\epsilon_i$"
}
}
})
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/markdown-it-vue#1.1.6/dist/markdown-it-vue.css">
<div id="app">
<markdown-it-vue class="md-body" :content="content"></markdown-it-vue>
</div>
Or importing the file from markdown-it-vue/dist/markdown-it-vue.css:
demo
I am using vuerouter really for the first time and I am trying to dynamically add a url name to the hyperlink of the route. Not sure what I am doing here, {{message}} would show the name and I am trying to concatenate that to the existing url--what am I doing wrong?
secondly, because these pages are dynamically generated, would I use vuex to store the state--? so that others could see the pages--?
const Home = { template: '<div>Home</div>' }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})}
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link to="url/+'{{message}}+'">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>
In order to generate the url, what you want is to use a v-bind on the route, you can do this by replacing the "to" with ":to"
Once you have that, the content of the attribute ":to" behaves as if it was javascript and you have access to all the properties of the vue component so you can just do:
<router-link to="'url/' + message">eCard</router-link>
However this route hasnt actually been registerd so it will not load anything.
Instead you may want to register a route that accepts a parameter
{ path: '/url/:id', name: 'ecard', component: eCardComponent , props: true }
In this way you can call your route as
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
Then you can do whatever you need in that component, like loading info from a database for that particular id.
Additionally, Vuex only works on the current tab (unless you use some code to syncronize it with the localstorage, like this example) and even then it would not persit it across machines.
const Home = { template: '<div>Home</div>' }
const eCardComponent = { template: '<div>Ecard :{{id}}</div>', props:['id'] }
const Foo = {
template: '<div>Foo {{n }}, {{b}}</div>',
props: ['n', 'b']
}
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/', component: Foo, props: route => ({
})},
{ path: '/url/:id', name:'ecard', component: eCardComponent, props: true },
]
})
new Vue({
router,
el: '#app',
data: {
message:''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body class="container">
<div id="app">
<h2>Generator</h2>
<input v-model="message" placeholder="Enter Plan Year"> {{message}} Year<br><br>
These pages are automatically generated:<br>
<strong> CardMain_{{message}}.html</strong><br>
<strong> Card_{{message}}.html</strong><br>
<strong> state_{{message}}.html</strong><br>
<strong> Log_{{message}}.html</strong><br>
<strong> Log2_{{message}}.html</strong><br><br>
<router-link to="/">/home</router-link>
<router-link :to="{ name: 'ecard', params:{ id: message } }">eCard</router-link>
<router-link to="/foo/5/5">Directory</router-link>
<router-view></router-view>
<p><button class="btn btn-primary">Generate</button></p>
</div>
I am trying to render a component but I get the error: property or method
"joke" is not defined in is not defined on the instance but referenced during render. I am using the dad jokes api to get data via the axios http library. Here is my code:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
</template>
<script src = "app.js" charset="utf-8"></script>
</body>
</html>
It's a simple issue with the html, you had ended the </li> before using {{joke}}
Change
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
to
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
Here's your working example:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
</template>
<script src = "app.js" charset="utf-8"></script>
</body>
</html>