Develop Reference

When does an element become available in dom after using vue v-if

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>

How do i bind the identifer to the url without making the data model a function

I have been fiddling with binding a hyperlink to my project, but I do not want to make my model a function. I simply want to bind the identifier so that if clicked, it will go to the proper url. Any insight would be great!
new Vue({
el: "#app",
data: {
generatedData: "Identifier": "1002", "Name": "some name",
]
},
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">
<p v-if="generatedData">The site location is here:
<a v-if="generatedData" href="https://yahoo.com/home/{{generatedData.Identifier}}">https://yahoo.com/home/{{generatedData.Identifier}}</a></p>
</div>

If I understood you correctly:
new Vue({
el: "#app",
data() {
return {
generatedData: {"Identifier": "1002", "Name": "some name"},
}
},
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">
<p v-if="generatedData">The site location is here:
<a v-if="generatedData" :href="'https://yahoo.com/home/'+generatedData.Identifier">
https://yahoo.com/home/{{generatedData.Identifier}}
</a>
</p>
</div>

Why I am unable to get the value using v-for?

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>

Props not linking with parent instance data

I have a "Product" component. The data from parent isn't passing to child. It stays set to default value entered from main template. Depending on premium value, shipping is free or costs 2,69.
I tried to understand using VueMastery introduction videos.. But i'm still struggling, can you please explain clear about what's the problem?
var app = new Vue({
el: '#app',
data: {
premium: false // Changing the value here doesn't make any change
}
})
Vue.component('product', {
props: {
premium: {
type: Boolean,
required: true
}
},
template: ``,
data() {},
computed: {
shipping() {
if(this.premium) {
return "Free";
}
return 2.69;
}
}
}
<div id="app">
<product :premium="true"></product> // Changing this, it works..
</div
Thanks in advance.

You need to use the data from parent as binding source for product.
<div id="app">
<product :premium="premium"></product>
</div>
Changing data.premium in parent should now propagate to the child.

Have a look here :)
var app = new Vue({
el: '#app',
data: {
premium: true, // Changing the value here also works
shipping: "Free"
}
})
Vue.component('product', {
template: '',
props: {
premium: {
type: Boolean,
required: true
}
},
data() {},
computed: {
shipping() {
if (this.premium) {
return "Free";
}
return 2.69;
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<product :premium="premium">{{ premium }} - {{ shipping }}</product>
<div> {{ premium }} - {{ shipping }}</div>
</div>
<!-- Changing this, it works.. -->

You can see in the documentation: https://v2.vuejs.org/v2/guide/components-props.html#Passing-a-Boolean
in your case you can try this:
<div id="app">
<product v-bind:premium="premium"></product>
</div>
Any change in "premium" should change the component "Product"

Is it possible to append a component on a button press?

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.