I want to get the values of "1999-00" (which is a part of stateStats data property) through a function xyz() defined in computed property but I am unable to do so.
Does anyone have some idea about it?
var app = new Vue({
el: "#app",
data(){
return {
stateStats : [{"State":"Andaman & Nicobar Islands","1999-00":"45"},
{"State":"Andhra Pradesh","1999-00":"27"},
{"State":"Arunachal Pradesh","1999-00":"9"}]
}
},
computed:{
xyz(){
return this.stateStats['1999-00']
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="x in xyz">
{{x}}
</div>
</div>
The computed property should be the same level as data.
var app = new Vue({
el: "#app",
data(){
return {/* whatever */}
},
computed : {
xyz(){
return this.stateStats.map( s => s['1999-00']);
}
}
});
You can use Array map function to get the desired property out of your array of objects.
var app = new Vue({
el: "#app",
data(){
return {
stateStats : [{"State":"Andaman & Nicobar Islands","1999-00":"45"},
{"State":"Andhra Pradesh","1999-00":"27"},
{"State":"Arunachal Pradesh","1999-00":"9"}]
}
},
computed:{
xyz(){
return this.stateStats.map(state => state["1999-00"]);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="x in xyz">
{{x}}
</div>
</div>
Related
I can pass a value from a main to my vue instance (another script) but won't work :(
<script>
let data = [{id:'1'}] //JUST SAMPLE
function pass_to_vue(data){
return data
}
</script>
<script>
var app = new Vue({
el: '#app',
data: {
external_value: pass_to_vue // HERE RECEIVE EXTERNAL VALUE
}
})
</script>
Thanks!
Please take a look at snippet below:
let ext = [{id:'1'}]
function pass_to_vue(data){
return data
}
document.querySelector('#ext').innerText = JSON.stringify(ext)
var app = new Vue({
el: '#demo',
data() {
return {
external_value: ''
}
},
mounted() {
this.external_value = pass_to_vue(ext)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
vue value
{{ external_value }}
<p>change id</p>
<input v-model="external_value[0].id" />
<hr />
</div>
<p>external value</p>
<p id="ext"></p>
When does an element become available in the dom after using a vue v-if? I would have thought you could do a query selector on the element after the v-if evaluates to true?
In the below code I need to get the .test element once the popout is shown but it shows as null - how do I get it?
new Vue({
el: "#app",
data() {
return {
showPopout: false,
};
},
methods: {
buttonClick(day) {
this.showPopout = true;
console.log(document.querySelector('.test'));
},
},
});
<script src="https://unpkg.com/vue#2.6.14/dist/vue.js"></script>
<div id='app'>
<span #click="buttonClick">show popout</span>
<div v-if="showPopout"><span class="test">test</span></div>
</div>
It will be there after nextTick
new Vue({
el: "#app",
data() {
return {
showPopout: false,
};
},
methods: {
buttonClick(day) {
this.showPopout = true;
this.$nextTick(() => {
console.log(document.querySelector('.test'));
});
},
},
});
<script src="https://unpkg.com/vue#2.6.14/dist/vue.js"></script>
<div id='app'>
<span #click="buttonClick">show popout</span>
<div v-if="showPopout"><span class="test">test</span></div>
</div>
I am simply trying do displat this number found in my data model, but it is not an array so not sure what needs to be added for this to display. For arrays normally generatedData.Number would work, but not in this case. Any assistance would be great!
ew Vue({
el: "#app",
data: {
generatedData:Object,Number:"14444"
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
my number is {{generatedData.Number}}
</div>
If I understood you correctly try like following snippet:
new Vue({
el: "#app",
data() {
return {
generatedData: {
Code: 'LA_100',
isActive: true,
Name: '44445',
Number: "14444"
}
}
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
my number is {{ generatedData.Number }}
</div>
I am trying to pass the name from data to my settingTemplate.
However, I have not been able to make it work. Could anyone advice how I should approach this? I am new to Vue.
app.js
var app = new Vue({
el: '#app',
components: {
settingTemplate
},
data: {
name: 'Elon'
}
})
setting-template.js
const settingTemplate = {
template:
`<div class="d-flex flex-column text-md-center">
<div class="p-2">
<b-btn id="popoverButton-disable" variant="primary"></b-btn>
</div>
<div class="p-2">
<b-popover :disabled.sync="disabled" target="popoverButton-disable" title="{{name}}">
<a>Profile</a> | <a>Logout</a>
</b-popover>
</div>
</div>`
,
data() {
return {
disabled: false
}
},
methods: {
disableByRef() {
if (this.disabled){
this.$refs.popover.$emit('enable')
}else{
this.$refs.popover.$emit('disable')
}
}
},
props: ['name']
}
You should pass name to your component by attribute, not by data:
<div id="app">
<setting-template name="Elon" />
</div>
Here you can check working example:
https://codepen.io/anon/pen/dwrOqY?editors=1111
data is component private data - it's not passed to child components.
If you still need name in your main component data you can pass it to the child component like this:
<div id="app">
<setting-template :name="name" />
</div>
var app = new Vue({
el: '#app',
components: {
settingTemplate
},
data: {
name: 'Leon'
}
})
https://codepen.io/anon/pen/qLvqeO?editors=1111
Here's a problem that I want to solve:
I have a button that when is pressed must append my-component to a dom.
If it is pressed 2 times there must be 2 <p> tegs. How can I achieve this?
js:
<script>
Vue.component('my-component', {
template: "<p>hello</p>",
})
var vue = new Vue({
el: "#App",
data: {},
methods: {
append: function() {
// unknown code here
}
}
})
</script>
html:
<div id = "App">
<button #click="append" class="btn btn-primary">Spawn stuff!</button>
</div>
Here is one way you could do that. This code iterates over a counter using v-for to iterate over a range.
Vue.component('my-component', {
template: "<p>hello</p>",
})
var vue = new Vue({
el: "#App",
data: {
hellocount: 0
},
methods: {
append: function() {
// unknown code here
this.hellocount++
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="App">
<my-component v-for="n in hellocount" :key="n"></my-component>
<button #click="append" class="btn btn-primary">Spawn stuff!</button>
</div>
This is a little atypical; normally you will drive the components rendered from actual data, as #RoyJ suggests in your comments.
From your comment below, you could build a form something like this.
Vue.component('my-input', {
props:["value", "name"],
data(){
return {
internalValue: this.value
}
},
methods:{
onInput(){
this.$emit('input', this.internalValue)
}
},
template: `
<div>
{{name}}:<input type="text" v-model="internalValue" #input="onInput">
</div>
`,
})
var vue = new Vue({
el: "#App",
data: {
form:{
name: null,
email: null,
phone: null
}
},
methods:{
append(){
const el = prompt("What is the name of the new element?")
this.$set(this.form, el, null)
}
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="App">
<my-input v-for="(value, prop) in form"
:key="prop"
v-model="form[prop]"
:name="prop">
</my-input>
<button #click="append">Add New Form Element</button>
<div>
Form Values: {{form}}
</div>
</div>
The code defines a form object and iterates over the properties of the form to render inputs for each property.
This is obviously extremely naive, handles only input texts, etc. But hopefully you get the idea.